javascript iPhone Safari screen.availHeight 和状态栏/工具栏/地址栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10511736/
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
iPhone Safari screen.availHeight and statusbar / toolbar / addressbar
提问by howard10
I'm trying to get the available screen size in iPhone Safari in order to shrink a container to the height of the screen, minus the statusbar and toolbar.
我试图在 iPhone Safari 中获取可用的屏幕尺寸，以便将容器缩小到屏幕的高度，减去状态栏和工具栏。
Since iOS always returns screen dimensions as though the phone is in portrait orientation, I'm using screen.availWidth to work out the height in landscape. The following are the dimensions returned:
由于 iOS 总是像手机处于纵向一样返回屏幕尺寸，因此我使用 screen.availWidth 来计算横向高度。以下是返回的维度：
screen.width; //320
screen.availWidth; //300
The 20px difference accounts for the top statusbar on the phone but doesn't take into account the button bar (toolbar) at the bottom of the screen.
20px 的差异占手机顶部状态栏的原因，但没有考虑屏幕底部的按钮栏（工具栏）。
Is there any property that I can use that would return 268px?
是否有任何我可以使用的属性会返回 268px？
I would just do (screen.availWidth - 32) but there's a chance the user will add the site as a desktop bookmark, in which case this bar won't be present and the 300px value would be correct.
我会这样做 (screen.availWidth - 32) 但用户有可能将站点添加为桌面书签，在这种情况下，此栏将不存在并且 300px 值将是正确的。
回答by Samuli Hakoniemi
I don't have the exact answer, but you can determine whether user is in Mobile Safari or in desktop bookmark with navigator.standaloneproperty. With this you could decide whether to substract 32px or not.
我没有确切的答案，但您可以确定用户是在 Mobile Safari 中还是在具有navigator.standalone属性的桌面书签中。有了这个，您可以决定是否减去 32px。
Edit:Found the answer. Use <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />and then the correct value can be get from window.innerWidth / window.innerHeight
编辑：找到答案。使用<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />然后可以得到正确的值window.innerWidth / window.innerHeight
