移动 Safari 窗口报告 980px答案

【问题标题】：Mobile Safari window reports 980px移动 Safari 窗口报告 980px
【发布时间】：2016-03-14 20:34:22
【问题描述】：

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

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

【问题讨论】：

标签： jquery mobile

【解决方案1】：

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

属性说明

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

根据文档获取设备宽度：

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

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

【讨论】：

谢谢。也感谢 Applie iOS 文档的链接。你是救生员！
但是如果我将视口设置为 width=device-width，横向 ipad 不应该返回 1024 吗？相反，它返回 768（这是高度，而不是宽度）
解决了我在响应式网站设计中遇到的一个主要问题。不能在小于 980 像素的任何设备、平板电脑、android、ios 上工作。谢谢！

【解决方案2】：

您是否尝试过以下方法？

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

【讨论】：

我仍然得到 980。我希望 640 像素，因为这是垂直握住时的水平宽度。

【解决方案3】：

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

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

【讨论】：