Screen.width/screen.height не обновляется после поворота экрана

Я испытываю эту проблему на устройстве iPhone (iPhone 7, iOS 10, но также и на других iPhone): в javascript, если я перехватываю событие changechange, внутри обработчика, screen.width и screen.height остаются то же (как перед вращением).

Так как это может зависеть от настроек видового экрана, вот как мой viewport объявлен в файле .html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />

Все отлично работает в симулированной визуализации Chrome.

Заранее благодарим за помощь.

ОТВЕТЫ

Ответ 1

Насколько я знаю, ширина экрана/ширина не изменится в устройстве после вращения. Чтобы проверить, вращается ли устройство, вы можете прочитать эти свойства

  • window.orientation. Это значение изменяется от 0 до + 90/-90
  • window.innerHeight/innerWidth: эти значения меняются местами
  • document.documentElement.clientHeight/clientWidth: эти значения меняются местами

К сожалению, это поведение несовместимо во всех устройствах Android/iOS/Window. Я думаю, что в этой показатель довольно объяснен.

Ответ 2

iOS используется для возврата размера экрана, как если бы он был в портрете. Они изменили его на iOS 8 (на родных классах), но они, возможно, забыли сделать это для Safari, или, возможно, сохранили его таким образом для совместимости.

Если вы хотите, чтобы реальный размер был основан на ориентации, которую вы можете использовать window.innerWidth и window.innerHeight

Я получаю те же значения с метатегами viewport или без него

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

Ответ 3

jQuery mobile имеет onOrienntetionChange событие, которое обрабатывает событие изменения ориентации, и есть функция $(window).orientationchange(); для изменения ориентации вручную.

Ответ 4

CSS не может обнаружить изменение ориентации.

Используйте JavaScript для изменения ориентации.

Добавьте функцию как

window.addEventListener("orientationchange", function() {
  document.body.style.width = window.innerWidth;
});

Это добавит event Handler в window, чтобы изменить width of body при изменении ориентации.

Больше ссылок на orientationchange