Игнорировать или отключать изменение размера мобильного видового экрана из-за открытой клавиатуры для ввода текста в мобильной сети?

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

<div class="fullscreen-cont">
    <div class="fullscreen-img"></div>
    <div class="cont-content-a">
        <div class="cont-content-b">
            Example content
        </div>
    </div>
</div>

.cont-content-a {
    display:table;position:relative;z-index:2;
    width:100%;
    height:100%;
}
.cont-content-b {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Я редактировал приведенный выше код, чтобы просто добавить стили для контента. Нажмите ссылку выше, чтобы увидеть полную стратегию и стили.

На главной странице я работаю над логотипом, текстовым вводом с встроенной кнопкой и кнопкой входа в систему ниже. И логотип, и кнопка входа в систему расположены абсолютно. Все выглядит отлично на мобильном устройстве.

Проблема возникает только в том случае, если пользователь касается ввода текста. Клавиатура сжимает область просмотра и, следовательно, фоновое изображение, скрежет и перекрытие всего содержимого.

Кто-нибудь знает, есть ли способ отключить изменение размера окна просмотра при открытии клавиатуры на мобильных устройствах? И есть ли способ сделать это без мобильного jQuery?

Ответ 1

Обычно, если вы не используете JQuery mobile, вам придется вручную исправить все ошибки, связанные с различными операционными системами. Если вы хотите пропустить эту библиотеку, вам нужно будет прослушать событие изменения размера видового экрана, и, слушая его, получите оставшуюся высоту и ширину окна просмотра.

запускает функцию в соответствии с изменением вида просмотра, как это показано

$(window).resize(function() 
{

});

и внутри, которые получают высоту ширины видового экрана, а затем соответствующим образом корректируют компоновку.

$(window).resize(function() 
{

   var viewportWidth = $(window).width();

   var viewportHeight = $(window).height();

   //do your layout change here.

});

Ответ 2

Похоже, вы можете упростить свой HTML/CSS и решить эту проблему.

Почему бы просто не добавить материал фонового изображения, а затем удалить все те дополнительные теги. Вниз забудьте установить метатег просмотра. Я всегда начинаю с этого, а затем меняю его по мере необходимости.

https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html