Question

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

iOS始终返回innerHeight = 1091和innerWidth = 980。

我正在使用iOS SDK中的iOS模拟器（我没有iPhone / iPod）。 iPhone和iPhone Retina仿真器返回相同的值。我不明白他们如何能够返回相同的数字，因为2个模型有2种不同的屏幕分辨率。

我使用了viewport参数但没有成功。

Answer 1

尝试使用screen.width代替window.innerWidth。

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

Answer 2

添加

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

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

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

Answer 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;

Answer 4

查看Apple有关如何为Mobile Safari设置视口的文档及其扩展方式：http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

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

Answer 5

还可以根据以下内容在视口元标记中指定高度：

<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（）时出现问题，因为我错过了指定元标记中的高度。添加后效果更好。

Answer 6

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

这并不完全是问题的答案，但是如果您尝试根据浏览器中显示的文档大小来做某事，则它是有用的信息。

即使您使用适当的视口元标记，

window.innerWidth（和高度）在移动浏览器上也会显得古怪。在某些浏览器中，它可能会非常不一致。

screen.width对于移动浏览器来说效果更好，但是您需要考虑方向以及浏览器是移动还是台式机（如果您需要同时响应两者），例如screen.width与window.innerWidth相比，桌面版提供了更多变化。

根据我的经验，document.documentElement.clientWidth是最好的选择。与window.innerWidth相比，移动浏览器对此属性的一致性更高，并且由于您处理的是html元素的尺寸，而不是浏览器窗口或设备屏幕的尺寸，因此移动设备和台式机之间的一致性是一致的，无需考虑。

Answer 7

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

因此，您可以使用此：

screen.width
screen.height

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

Answer 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并将其返回到原始位置，以使窗口大小值刷新为正确的大小。

iOS返回window.innerHeight / Width的错误值

8 个答案: