IOS возвращает неверное значение для window.innerHeight/Width

Я использую инструкции window.innerHeight и window.innerWidth, чтобы получить доступный размер окна браузера. Он работает с firefox, сафари (на Mac) и Android, но я получаю странные результаты в iOS.

iOS всегда возвращает innerHeight = 1091 и innerWidth = 980.

Я использую эмулятор iOS из iOS SDK (у меня нет iPhone/iPod). Такое же значение возвращается с эмулятором iPhone и iPhone Retina. Я не понимаю, как они могут возвращать одинаковые числа, потому что 2 модели имеют 2 разных разрешения экрана.

Я играл с параметром viewport без успеха.

Ответы

Ответ 1

Попробуйте использовать screen.width вместо window.innerWidth.

<script>
  if (screen.width > 650) {
    ....
  }
</script>

Ответ 2

Добавить

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

в элемент <head>. Это устранит проблему innerWidth.

Ретина имеет пиксели с высокой плотностью - в основном 4 аппаратных пикселя до 1 логического пикселя. Вот почему они сообщают о той же резолюции.

Ответ 3

Застрял на том же вопросе. Вот решение, которое сработало для меня.

Сначала я определяю, является ли клиент устройством iOS. Тогда я получаю правильные значения с помощью интерфейса экрана

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;

Ответ 4

Проверьте документацию Apple о том, как установить окно просмотра для Mobile Safari и как он масштабируется: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

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

Ответ 5

Также укажите высоту в метатеге viewport в соответствии с этим:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

У меня были проблемы с использованием jQuery $(window).height() на моем iPad 2 (5.0.1), так как я пропустил определение высоты в метатеге. После добавления он работает намного лучше.

Ответ 6

TL; DR: использовать document.documentElement.clientHeight/Width

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

window.innerWidth (и height) могут стать дурацкими в мобильных браузерах, даже если вы используете правильные метатеги области просмотра. В некоторых браузерах это может быть очень противоречивым.

screen.width работает лучше для мобильных браузеров, но тогда вам нужно принять во внимание ориентацию и то, является ли браузер мобильным или настольным (если вам нужно реагировать на оба), так как screen.width дает гораздо больше вариаций на рабочем столе по сравнению в window.innerWidth.

По моему опыту, document.documentElement.clientWidth - лучший путь. Мобильные браузеры гораздо более согласованы для этого атрибута, чем для window.innerWidth, и, поскольку вы работаете с размерами элемента html, а не с окном браузера или экраном устройства, он согласуется между мобильным и рабочим столом, и ориентация не требуется. быть учтенным.

Ответ 7

Последняя версия iOS не поддерживает window.innerHeight и window.innerWidth, потому что iOS будет считывать разрешение.

Итак, вы можете использовать это:

screen.width
screen.height

Я попробовал это в appetize.io эмуляторе iPhone.