Javascript iOS 为 window.innerHeight/Width 返回错误值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4629969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS return bad value for window.innerHeight/Width
提问by ohmer
I'm using window.innerHeightand window.innerWidthinstructions to get the browser's available window size. It's working with firefox, safari (on a mac) and android but I get strange results in iOS.
我正在使用window.innerHeight和window.innerWidth指令来获取浏览器的可用窗口大小。它适用于 firefox、safari（在 Mac 上）和 android，但我在 iOS 中得到了奇怪的结果。
iOS always returns innerHeight=1091 and innerWidth=980.
iOS 总是返回innerHeight=1091 和innerWidth=980。
I'm using iOS emulator from the iOS SDK (I don't own an iPhone/iPod). The same value is returned with the iPhone and iPhone Retina emulator. I don't understand how they can both returns the same numbers because the 2 models have 2 different screens resolutions.
我正在使用来自 iOS SDK 的 iOS 模拟器（我没有 iPhone/iPod）。iPhone 和 iPhone Retina 模拟器返回相同的值。我不明白它们如何返回相同的数字，因为 2 个型号有 2 个不同的屏幕分辨率。
I played with the viewport parameter with no success.
我玩了 viewport 参数但没有成功。
回答by Senya
Try to use screen.widthinstead of window.innerWidth.
尝试使用screen.width而不是window.innerWidth.
<script>
if (screen.width > 650) {
....
}
</script>
回答by Jacquen
TL;DR:Use document.documentElement.clientHeight/Width
TL;DR：使用document.documentElement.clientHeight/Width
This is not exactly an answer to the question, but it's helpful information if you're trying to do things based on the size of the document shown in the browser.
这并不完全是问题的答案，但如果您尝试根据浏览器中显示的文档大小执行操作，它会提供有用的信息。
window.innerWidth(and height) can get wacky on mobile browsers, even when you use the proper viewport meta tags. On some browsers it can be very inconsistent.
window.innerWidth（和高度）在移动浏览器上可能会变得古怪，即使您使用正确的视口元标记。在某些浏览器上，它可能非常不一致。
screen.widthworks better for mobile browsers, but then you need to take into account orientation and whether or not the browser is mobile or desktop (if you need to be responsive for both), as screen.widthgives much more variation on desktop compared to window.innerWidth.
screen.width对于移动浏览器效果更好，但是您需要考虑方向以及浏览器是移动浏览器还是桌面浏览器（如果您需要对两者都做出响应），因为screen.width与window.innerWidth.
In my experience, document.documentElement.clientWidthis the best way to go. Mobile browsers are much more consistent for this attribute than for window.innerWidth, and since you're dealing with the dimensions of the html element and not the browser window or the device screen, it's consistent between mobile and desktop, and orientation does not need to be accounted for.
根据我的经验，这document.documentElement.clientWidth是最好的方法。移动浏览器对于此属性的一致性比 for 更加一致window.innerWidth，并且由于您处理的是 html 元素的尺寸而不是浏览器窗口或设备屏幕，因此移动设备和桌面设备之间是一致的，并且不需要考虑方向为了。
回答by dan gibson
Add
添加
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
to the <head>element. That will fix the innerWidthissue.
到<head>元素。这将解决innerWidth问题。
The retina has high density pixels - basically 4 hardware pixels to 1 logical pixel. That's why they report the same resolution.
视网膜具有高密度像素 - 基本上是 4 个硬件像素到 1 个逻辑像素。这就是为什么他们报告相同的分辨率。
回答by Sergei Panfilov
Was stuck on the same issue. Here's the solution that worked for me.
被困在同样的问题上。这是对我有用的解决方案。
First I'm detecting if the client is an iOS device. Then i'm getting correct values using Screen interface
首先，我正在检测客户端是否是 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;
回答by M Fauzi Riozi
iOSlatest version does not support window.innerHeightand window.innerWidth, because iOS will read the resolution.
iOS最新版本不支持window.innerHeight和window.innerWidth，因为 iOS 会读取分辨率。
So, you can use this :
所以，你可以使用这个：
screen.width
screen.height
I have try it in appetize.io emulator iPhone.
我已经在 appetize.io 模拟器 iPhone 中尝试过了。
回答by Valleywood
Also specify the height in the viewport meta tag according to this:
还要根据以下内容在视口元标记中指定高度：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I had problems with using jQuery $(window).height() on my iPad 2 (5.0.1) since I had missed out specifying the height in the meta tag. After adding it works much better.
我在 iPad 2 (5.0.1) 上使用 jQuery $(window).height() 时遇到问题，因为我没有在元标记中指定高度。添加后效果会更好。
回答by pgb
Check Apple's documentation on how to set the viewport for Mobile Safari, and how it scales: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html
查看 Apple 的文档，了解如何为 Mobile Safari 设置视口及其缩放方式：http: //developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html
Basically, you can set a scale for the viewport, and make it default to whatever you want by setting a meta tag on your HTML page.
基本上，您可以为视口设置比例，并通过在 HTML 页面上设置元标记使其默认为您想要的任何内容。
