移动版Safari窗口显示980像素

Question

为什么在iPhone 4上报告的是980？我原以为应该是960或640。

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

- Chris McClellan

Answer 1

您正在获取默认的视口设置。请参考 Apple iOS文档-元标签 并搜索“viewport”。

属性 描述

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

根据文档获取设备宽度：

例如，要将视口宽度设置为设备宽度，请将以下内容添加到您的HTML文件中：

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

- typo.pl

---

谢谢。还要感谢您提供的Apple iOS文档链接。您真是我的救星！ - Chris McClellan

但是如果我将视口设置为width=device-width，iPad在横向模式下不应该返回1024吗？相反，它返回768（这是高度，而不是宽度）。 - Kokodoko

解决了我在响应式网站设计中遇到的一个重要问题。它不能在任何设备、平板电脑、安卓或iOS上以小于980像素的分辨率正常工作。谢谢！ - Andy

Answer 2

你尝试过以下方法吗？

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

- Micky McQuade

---

我仍然得到了980像素。我期望的是640像素，因为在垂直方向上保持水平宽度是640像素。 - Chris McClellan

Answer 3

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

如果您发现添加元标记<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 ...
})

- Neil Atkinson