Ответ 1
Попробуйте использовать screen.width
вместо window.innerWidth
.
<script>
if (screen.width > 650) {
....
}
</script>
Я использую инструкции window.innerHeight и window.innerWidth, чтобы получить доступный размер окна браузера. Он работает с firefox, сафари (на Mac) и Android, но я получаю странные результаты в iOS.
iOS всегда возвращает innerHeight = 1091 и innerWidth = 980.
Я использую эмулятор iOS из iOS SDK (у меня нет iPhone/iPod). Такое же значение возвращается с эмулятором iPhone и iPhone Retina. Я не понимаю, как они могут возвращать одинаковые числа, потому что 2 модели имеют 2 разных разрешения экрана.
Я играл с параметром viewport без успеха.
Попробуйте использовать screen.width
вместо window.innerWidth
.
<script>
if (screen.width > 650) {
....
}
</script>
Добавить
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
в элемент <head>
. Это устранит проблему innerWidth
.
Ретина имеет пиксели с высокой плотностью - в основном 4 аппаратных пикселя до 1 логического пикселя. Вот почему они сообщают о той же резолюции.
Застрял на том же вопросе. Вот решение, которое сработало для меня.
Сначала я определяю, является ли клиент устройством iOS. Тогда я получаю правильные значения с помощью интерфейса экрана
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;
Проверьте документацию Apple о том, как установить окно просмотра для Mobile Safari и как он масштабируется: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html
В принципе, вы можете установить масштаб для окна просмотра и сделать его по умолчанию тем, что вы хотите, установив метатег на вашу HTML-страницу.
Также укажите высоту в метатеге 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), так как я пропустил определение высоты в метатеге. После добавления он работает намного лучше.
TL; DR: использовать document.documentElement.clientHeight/Width
Это не совсем ответ на вопрос, но полезная информация, если вы пытаетесь сделать что-то, основываясь на размере документа, показанного в браузере.
window.innerWidth
(и height) могут стать дурацкими в мобильных браузерах, даже если вы используете правильные метатеги области просмотра. В некоторых браузерах это может быть очень противоречивым.
screen.width
работает лучше для мобильных браузеров, но тогда вам нужно принять во внимание ориентацию и то, является ли браузер мобильным или настольным (если вам нужно реагировать на оба), так как screen.width
дает гораздо больше вариаций на рабочем столе по сравнению в window.innerWidth
.
По моему опыту, document.documentElement.clientWidth
- лучший путь. Мобильные браузеры гораздо более согласованы для этого атрибута, чем для window.innerWidth
, и, поскольку вы работаете с размерами элемента html, а не с окном браузера или экраном устройства, он согласуется между мобильным и рабочим столом, и ориентация не требуется. быть учтенным.
Последняя версия iOS
не поддерживает window.innerHeight
и window.innerWidth
, потому что iOS будет считывать разрешение.
Итак, вы можете использовать это:
screen.width
screen.height
Я попробовал это в appetize.io эмуляторе iPhone.