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

Ответ 1

Я знаю, что это старый вопрос, но у меня была такая же проблема в моем приложении. Решение, которое я нашел, было довольно простым. (Мое приложение находится в Angular, поэтому я помещаю это в функцию app.component ngOnInit, но 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);

Это заставляет метаданные viewport явно устанавливать высоту видового экрана, тогда как hardcoding

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

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

Ответ 2

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

Итак, вам нужно просто немного javascript (вот jQuery):

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

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

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

ИЗМЕНИТЬ 1: Я просто столкнулся с новой проблемой, поэтому я предлагаю свое решение здесь. В большинстве случаев смартфоны имеют минимальный предел для размера шрифта. Вы должны изменить все свое значение rem и разделить на 3 или 4. Затем вы должны изменить javascript с помощью:

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

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

Ответ 3

В angular 4+

import {Meta} from "@angular/platform-browser";


constructor(private metaService: Meta){}

ngOnInit() {
  this.metaService.updateTag({
  name: 'viewport',
    content: 'height=${this.height}px, width=${this.width}px, initial-scale=1.0'
  },
  'name='viewport''
);
}

Ответ 4

Вы можете использовать%, который, кажется, не подвержен этой проблеме, или vw (не затронут по очевидной причине) даже для высоты.

Ответ 5

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

Я создал небольшую функцию JS SET, которая загружается после завершения DOM.

Каждый элемент, назначенный специальному классу (в данном случае ".pheight"), не изменяется при уменьшении высоты области просмотра. Изменение размера возможно только при увеличении высоты области просмотра или при изменении ширины области просмотра.

Так что в моих приложениях это работает отлично!

  var docwidth = window.innerWidth;
  var docheight = window.innerHeight;
  function pheigt_init() {    
    pheigt_set_prevent_height();
    window.onresize = function() {
        if (docwidth !== window.innerWidth || docheight < window.innerHeight) {
            pheigt_upd_prevent_height();
        }
    };
  }
  function pheigt_set_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
     node.style.height = node.offsetHeight + 'px';
    });
  }
  function pheigt_upd_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
        node.style.removeProperty('height');
    }); 
    setTimeout(function(){ pheigt_set_prevent_height(); }, 100);
    docheight = window.innerHeight;
    docwidth = window.innerWidth;
  }
  document.addEventListener('DOMContentLoaded', pheigt_init());

Ответ 6

Та же проблема поставила меня на шаг. Я не нашел никакого решения 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мс выше из-за задержки устройств, выполняющих изменение ориентации.

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