Как заставить window.innerHeight работать на мобильных устройствах при масштабировании?

Question

window.innerHeight

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

Допустим, при загрузке было 500 пикселей. Затем пользователь увеличивает масштаб и теперь высота составляет 200 пикселей. Однако значение все еще возвращает 500px.

Кто-нибудь знает способ исправить это? В поисках навсегда.

Answer 1

Проверьте принятый ответ по этой ссылке: Обнаружение изменения масштаба страницы с помощью jQuery в Safari

Если вы хотите innerHeight, возможно, получите исходную ширину, а затем увеличенную ширину, получите коэффициент масштабированияа затем рассчитать новую высоту (после увеличения).

Answer 2

Это сработало для меня.Первое, что я делаю, это извлекаю window.innerHeight и window.innerWidth из dom при загрузке страницы, чтобы я получил исходные значения и сохранил их в переменных javascript.Затем в моем обработчике события window.onresize я делаю это.

var height = null;
var width = null;

if (window.orientation && window.orientation == -90) {
  height = myOriginalHeight;
  width = myOriginalWidth;
}
else {
  height = myOriginalWidth;
  width = myOriginalHeight;
}
doCallbacks(width, height);

Мое приложение сильно изменяет размеры, потому что я пытаюсь написать один пользовательский интерфейс для всех типов экранов.Согласно моему тестированию с приложением, это работает на ipad и andriod, и все изменения размера работают при увеличении или изменении ориентации, что иногда может привести к увеличению.

Интересный аспект этого - мобильные браузеры никогда не меняют экранразмеры, как они фиксированы, они просто масштабируются.Но если вы измените размеры до первоначальной ширины / высоты и измените ориентацию таким образом, это сработает.

Answer 3

Способ, которым я исправил это, состоял в том, чтобы удалить любой обратный вызов изменения размера в моем коде.Звучит странно, но у меня это сработало.