Окно мобильного Safari сообщает 980px

Question

Почему этот отчет 980 на iPhone 4?Я думал, что это будет 960 или 640.

alert($(window).width());

Answer 1

Вы получаете настройку видового экрана по умолчанию. Смотрите Документы Apple iOS - метатег и ищите «viewport».

Имущество Описание

width Ширина области просмотра в пикселях. По умолчанию 980. Диапазон составляет от 200 до 10000. Вы также можете установить это свойство для констант, описанных в «число». Доступно в iOS 1.0 и более поздних версиях.

Чтобы получить ширину устройства согласно документам:

Например, чтобы установить ширину области просмотра равной ширине устройства, добавьте это в файл HTML:

<meta name="viewport" content="width=device-width" />

Answer 2

В safari по умолчанию ширина окна составляет 980px, поэтому, если ваш javascript начнет выполняться до загрузки окна, ширина будет 980px, даже если ваш метатег viewport определяет ширину как «ширина устройства».

Если вы обнаружите, что добавление метатега <meta name="viewport" content="width=device-width" /> не решит вашу проблему, убедитесь, что ваш код Javascript выполняется только после загрузки окна.

В ванильном Javascript:

console.log(window.innerWidth) // might be the default width

window.onload= function () {
  console.log(window.innerWidth) // should now be device width
  //... your code here ...

}

В качестве альтернативы, если используется jQuery:

console.log(window.innerWidth) // might be the default width

$( document ).ready(function () {
  console.log(window.innerWidth) // should now be device width
  //... your code here ...
})

Answer 3

Вы пробовали следующее?

alert($(document).width());