Проблема рендеринга компонента страницы ⇐ 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>
Проблема:
Когда я открываю приложение в браузере, представление о визуализированной странице влияет так, как я не могу полностью понять. Я заметил следующее: < /p>
Когда клавиатура открыта: макет страницы искажен. Кроме того, я прикрепил изображения для лучшего понимания: < /p>

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

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

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

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