HTML-форма изменяет размер веб-страницы из-за мобильной клавиатуры

Question

Я пытаюсь написать внешний вид базовой формы входа для веб-сайта.Я начинающий веб-разработчик и столкнулся с некоторыми проблемами при разработке мобильной версии сайта.Вы можете найти исходный код моего сайта здесь и изображение формы на моем сайте здесь .

Веб-сайт предназначен для отображения интерфейса пользователя только в том случае, если ширина экрана превышает 1024 пикселя или когда ширина экрана меньше 1024 пикселя, а устройство находится в портретной ориентации.Это сделано преднамеренно, и когда эти спецификации не выполняются , отображается .

Однако, когда я нахожусь в портретном режиме и нажимаю на форму, это мгновенно отображается.Однако он быстро исчезает, и я уверен, что это потому, что как только веб-страница отображает страницу «неподдерживаемый размер экрана», форма больше не существует на веб-странице.Это заставляет клавиатуру скользить вниз, и страница возвращается в нормальное состояние.Чтобы решить эту проблему, я сослал здесь , но веб-страница все еще не работала.

Затем я попытался удалить страницу "неподдерживаемый размер экрана" (этот исходный код можно найти здесь ), но затем это приводит к тому, что я нажимаю на форму,Я уверен, что это потому, что я установил высоту html и body на 100%.

В идеале я хотел бы создать веб-страницу, которая сохраняет страницу «неподдерживаемый размер экрана», когда размер экрана действительно не поддерживается (или имеет неправильную ориентацию), но когда форма нажимается на мобильном телефонесайт, я бы хотел, чтобы исходная веб-страница не меняла размер, а делала ее прокручиваемой поверх клавиатуры.Опять же, я новичок (это мой первый раз в разработке переднего плана), и я был бы признателен за любую помощь или совет для меня, чтобы решить эту проблему.Заранее спасибо.

Answer 1

Когда я делаю простые проекты и хочу скрыться на каком-либо типе устройства, я буду использовать правило css @media, как в следующем примере (измените размер окна, чтобы увидеть изменение текста)

@media only screen and (max-width: 768px) {
        .small-screen{
             display:inherit;
             background-color: red;
        }
        .large-screen {
            display:none;
        }
    }
    
@media only screen and (min-width: 769px) {
        .small-screen{
             display:none;
        }
        .large-screen{
             display:inherit;
             background-color: blue;
        }
    }

<span class="small-screen">show me on a small screen</span>
<span class="large-screen">show me on a large screen</span>