Question

为什么这会在iPhone 4上报告980？我以为它会是960或640.

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

Answer 1

您将获得默认视口设置。请参阅Apple iOS docs - meta tag并搜索“viewport”。

属性说明

width 视口的宽度（以像素为单位）。默认值为980.范围为200到10,000。您还可以将此属性设置为“number”中描述的常量。   适用于iOS 1.0及更高版本。

要获取设备宽度，请按照文档：

例如，要将视口宽度设置为设备的宽度，请将其添加到HTML文件中：

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

Answer 2

您是否尝试过以下操作？

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

Answer 3

在safari中，默认窗口宽度为980px，因此如果您的javascript在窗口加载之前开始执行，则宽度将为980px，即使您的视口元标记将宽度指定为“设备宽度”。

如果您发现添加元标记<meta name="viewport" content="width=device-width" />无法解决您的问题，请确保您的Javascript代码仅在窗口加载后才会执行。

在vanilla 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 ...
})

Mobile Safari窗口报告980px

3 个答案: