Проблема рендеринга компонента страницы ⇐ Html

[Anonymous]

Контекст:
Я использую Tailwind CSS с угловым проектом. Приложение имеет компонент APP и компонент App-Layout.

Код: Выделить всё

@layer base {
html {
display: flex;
flex-direction: column;
@apply h-screen w-screen;
}
body {
@apply h-full w-full m-0 p-0 bg-white font-medium text-[#77767A];
font-family: 'Lato';
}
}
< /code>
Компонент приложения: < /p>

Файл компонента приложения CSS:
:host {
@apply h-full w-full;
}
< /code>
Шаблон компонента приложения: < /p>

hello

< /code>
Файл компонента приложения компонента CSS: < /p>
:host {
@apply flex flex-col;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}

@media (pointer: none), (pointer: coarse) {
.layout {
position: fixed;
height: 100%;
}
}
< /code>
Описание проблемы: я испытываю несоответствия макета в своем угловом приложении с Tailwind CSS, в частности на мобильных устройствах: < /p>
Когда открыта виртуальная клавиатура:
макет страницы становится искаженной
Когда виртуальная клавиатура закрыта:
Mayout отображается правильно, как и ожидалось
Текущее поведение: < /p>
Проблемы с макетом возникают специально, когда активируется мобильная виртуальная клавиатура
структура страницы, кажется, ломается, когда клавиатура появляется
ожидаемое поведение: < /p>
макет должен поддерживать свою структуру независимо от состояния виртуальной клавиатуры
, должно регулироваться соответствующим образом, когда клавиатура появляется /исчезает
Кроме того, я прикрепил изображения для лучшего понимания: < /p>

• Когда страница впервые открыта (с открытой клавиатурой): < /li>
  < /ul>
  
  
  Когда окно касается (клавиатура Открыть):

< /p>
То, что я идентифицировал:
кажется, что когда клавиатура открывается на мобильных устройствах или подобных средах, макет влияет. Когда клавиатура закрыта, страница отображается, как и ожидалось. Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... ring-issue