iOS 为 window.innerHeight/Width 返回错误值答案

【问题标题】：iOS return bad value for window.innerHeight/WidthiOS 为 window.innerHeight/Width 返回错误值
【发布时间】：2011-01-07 20:26:32
【问题描述】：

我正在使用 window.innerHeight 和 window.innerWidth 指令来获取浏览器的可用窗口大小。它适用于 firefox、safari（在 Mac 上）和 android，但我在 iOS 中得到了奇怪的结果。

iOS 总是返回 innerHeight=1091 和 innerWidth=980。

我正在使用来自 iOS SDK 的 iOS 模拟器（我没有 iPhone/iPod）。 iPhone 和 iPhone Retina 模拟器返回相同的值。我不明白它们如何返回相同的数字，因为这 2 种型号有 2 种不同的屏幕分辨率。

我使用视口参数没有成功。

【问题讨论】：

标签： javascript iphone ios

【解决方案1】：

TL;DR：使用document.documentElement.clientHeight/Width

这并不完全是对问题的回答，但如果您尝试根据浏览器中显示的文档大小进行操作，它是有用的信息。

window.innerWidth（和高度）在移动浏览器上可能会变得古怪，即使您使用正确的视口元标记也是如此。在某些浏览器上，它可能非常不一致。

screen.width 更适合移动浏览器，但是您需要考虑方向以及浏览器是移动还是桌面（如果您需要对两者都做出响应），因为screen.width 提供了更多变化在桌面上与window.innerWidth 相比。

根据我的经验，document.documentElement.clientWidth 是最好的选择。移动浏览器对于这个属性比window.innerWidth 更加一致，并且由于您处理的是 html 元素的尺寸而不是浏览器窗口或设备屏幕，因此它在移动设备和桌面设备之间是一致的，并且不需要方向予以考虑。

【讨论】：

【解决方案2】：

尝试使用screen.width 而不是window.innerWidth。

<script>
  if (screen.width > 650) {
    ....
  }
</script>

【讨论】：

在编写跨浏览器 CSS 时需要注意的一点是，您要记住桌面上的 screen.width 会很高，因为它会报告屏幕分辨率的像素宽度在操作系统本身，而不是网络浏览器窗口的像素宽度。

【解决方案3】：

被困在同一个问题上。这是对我有用的解决方案。

首先我要检测客户端是否是 iOS 设备。然后我使用Screen interface得到正确的值

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;

【讨论】：

window.innerWidth 会因 iPhone 上的方向而异。您还需要查看window.orientation。

【解决方案4】：

添加

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

到<head> 元素。这将解决 innerWidth 问题。

视网膜具有高密度像素 - 基本上是 4 个硬件像素到 1 个逻辑像素。这就是他们报告相同分辨率的原因。

【讨论】：

在我的情况下没有帮助...使用 Xcode 4.6.3 和 iPhone 6.1 模拟器
maximum-scale=1.0; user-scalable=no
我必须将innerWidth 的支票放入setTimeout 才能正常工作。即使在window.onload 中，它也给了我 980。我确实有元标记。 screen.width 立即生效。
禁用您的 WEB 应用程序（以及其他上下文）的缩放可能是一件非常好的事情。

【解决方案5】：

iOS最新版本不支持window.innerHeight和window.innerWidth，因为iOS会读取分辨率。

所以，你可以使用这个：

screen.width
screen.height

我已经在 appetize.io 模拟器 iPhone 中尝试过了。

【讨论】：

【解决方案6】：

查看 Apple 文档，了解如何为 Mobile Safari 设置视口以及如何缩放：http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

基本上，您可以为视口设置比例，并通过在 HTML 页面上设置元标记使其默认为您想要的任何值。

【讨论】：

我在发帖之前找到了这个页面。我不完全确定这是否相关，但我没有找到如何使 safari 移动设备无法扩展到 980x1091。我尝试使用但没有改变任何东西。
如果您希望视口为 320x480，您应该尝试<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">

【解决方案7】：

还要根据这个在视口元标记中指定高度：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

我在 iPad 2 (5.0.1) 上使用 jQuery $(window).height() 时遇到了问题，因为我错过了在元标记中指定高度。添加后效果更好。

【讨论】：

如果您的 iOS 应用程序不是全屏的，这将中断。即使它仅嵌入在拆分视图的右窗格中，它也会使您的 webview 全屏尺寸尺寸。

【解决方案8】：

同样的问题。我有一个全屏应用程序，用户无需缩放任何东西（它是一个信息亭），我的解决方案是添加 shrink-to-fit=no 元。

我当前的视口元数据是：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />

现在window.innerWidth、jQuery(window).width() 和其他所有相关的东西都能正常工作。在此之前，我必须旋转 iPad 并将其返回到原始位置，以便窗口大小值刷新到正确的值。

【讨论】：