Android-клавиатура, сокращающая область просмотра и элементы с помощью модуля vh в CSS

Question

Я испытываю очень странную и уникальную проблему.

Все мои страницы используют vh и vw единицы CSS вместо px из-за характера проекта.

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

На ipad эта проблема не существует, поскольку клавиатура перекрывает экран и не нажимает экран.

Ищите любое решение, чтобы избежать клавиатуры Android, чтобы не нажимать окно просмотра браузера и не сохранять исходный размер.

Примечание: Единственный вариант, с которым я остался, - это избегать клавиатуры, чтобы нажимать viewport, я не смогу изменить единицы CSS или использовать xml, manifest. Это веб-страницы, которые испытывают эту проблему.

Answer 1

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

Однако, если вы можете использовать JQuery (или почти JavaScript), у меня есть код, который вы можете использовать для его разрешения.

var viewportHeight = $(window).height(); 
var viewportWidth = $(window).width(); 
$('body,html').css("height",viewportHeight); //if vh used in body/html too 
$('.someClass').css("height",viewportHeight*0.12);// or whatever percentage you used in vh 
$('#someId').css("width",viewportWidth*0.12); 

Ну, это всего лишь пример, вы можете использовать процентные идентификаторы jQuery, которые вам нужны.

PD: есть один совет для вашей информации. поместите код в финал своего html или внутри $ (document) .ready (function() {});, и если вам нужен отзывчивый дизайн, поставьте его также внутри события changechange; сюда.

$(window).on("orientationchange",function(event){ window.setTimeout(function(){ 
var viewportHeight = $(window).height(); 
var viewportWidth = $(window).width(); 
$('body,html').css("height",viewportHeight); 
$('.someClass').css("height",viewportHeight*0.12); 
$('.someClass').css("width",viewportWidth*0.09); 
$('#someId').css("height",viewportHeight*0.1); 
}}, 450);}); 

Я поставил таймер на 450 мс выше из-за задержки устройств, выполняющих ориентацию.

Извините за мой английский, приветствий

Answer 2

я столкнулся с той же проблемой в последнее время, и мне потребовалось время, чтобы найти хорошее решение. Я разрабатываю приложение cordova, используя html5, css3 и angularjs. Но, кроме того, я хочу, чтобы мое приложение соответствовало каждому экрану без написания тонов медиа-запросов и, наконец, нечитаемых css. Я начал с просмотра и vh, но клавиатура сломалась.

Так что вы должны использовать только немного Javascript (здесь JQuery), как это:

$("html").css({"font-size": ($(window).height()/100)+"px"}); 

Здесь вы идете, теперь вы можете использовать «гет» точно так же, как вы используете «VH ", за исключением того, что видовой экран не будет влиять на размер шрифта. «Рем» устанавливается только на размер шрифта html root, и мы просто устанавливаем его с jquery на 1% высоты экрана.

Надеюсь, это поможет!

EDIT 1: Я только что столкнулся с новой проблемой, поэтому я предлагаю свое решение здесь. В большинстве случаев смартфоны имеют минимальный предел для размера шрифта. Вы должны изменить все свое значение rem и разделить его на 3 или 4. Затем вы должны изменить JavaScript с:

$("html").css({"font-size": ($(window).height()/25)+"px"}); /*(this is if you divide with 4)*/ 

Это даже проще, если вы используете SASS, вы можете создать функцию бэр, которая будет делать разделение для вас.

Answer 3

Я знаю, что это старый вопрос, но у меня была такая же проблема в моем приложении. Решение, которое я нашел, было довольно простым. (Мое приложение в Угловом, так что я положил это в ngOnInit функции app.component, но document.ready() или любой другой «инициализация завершена» обратный вызов должен хорошо работать с правильным экспериментирования)

setTimeout(function() { 
     let viewheight = $(window).height(); 
     let viewwidth = $(window).width(); 
     let viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0"); 
    }, 300); 

Это вынуждает видовую мету к явно установить видовую высоту, в то время как жестко прописывать

<meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1"> 

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