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

ohm*_*mer 26 javascript iphone ios

我正在使用window.innerHeightwindow.innerWidth指令来获取浏览器的可用窗口大小.它正在使用firefox,safari(在Mac上)和android,但我在iOS中得到了奇怪的结果.

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

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

我使用viewport参数但没有成功.

Jac*_*uen 23

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

这不完全是问题的答案,但如果您尝试根据浏览器中显示的文档大小执行操作,它会提供有用的信息。

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

screen.width对于移动浏览器效果更好,但是您需要考虑方向以及浏览器是移动浏览器还是桌面浏览器(如果您需要对两者都做出响应),因为screen.widthwindow.innerWidth.

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


Sen*_*nya 16

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

<script>
  if (screen.width > 650) {
    ....
  }
</script>
Run Code Online (Sandbox Code Playgroud)

  • 在编写跨浏览器CSS时,有一点需要注意,你想要记住桌面上的`screen.width`会很高,因为它会报告操作系统本身屏幕分辨率的像素宽度,而不是Web浏览器窗口的像素宽度. (5认同)

dan*_*son 8

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
Run Code Online (Sandbox Code Playgroud)

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

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

  • `最大尺度= 1.0; user-scalable = no` <=永远不要这样做.禁用缩放是可用性和可访问性的可怕做法 (12认同)
  • 在我的情况下没有帮助...使用Xcode 4.6.3和iPhone 6.1模拟器 (2认同)

Ser*_*lov 5

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

首先,我要检测客户端是否是iOS设备。然后我使用Screen界面获取正确的值

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


pgb*_*pgb 1

查看 Apple 的文档,了解如何设置 Mobile Safari 的视口及其缩放方式:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

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