iPhone Safari screen.availHeight 和状态栏/工具栏/地址栏答案

【问题标题】：iPhone Safari screen.availHeight and statusbar / toolbar / addressbariPhone Safari screen.availHeight 和状态栏/工具栏/地址栏
【发布时间】：2012-05-09 07:37:01
【问题描述】：

我正在尝试在 iPhone Safari 中获取可用的屏幕尺寸，以便将容器缩小到屏幕高度，减去状态栏和工具栏。

由于 iOS 总是返回屏幕尺寸，就好像手机是纵向的一样，我使用 screen.availWidth 来计算横向的高度。以下是返回的尺寸：

screen.width; //320
screen.availWidth; //300

20px 的差异只考虑了手机顶部的状态栏，但没有考虑到屏幕底部的按钮栏（工具栏）。

我可以使用任何可以返回 268px 的属性吗？

我会这样做 (screen.availWidth - 32)，但用户可能会将站点添加为桌面书签，在这种情况下，此栏将不存在，并且 300px 值将是正确的。

【问题讨论】：

经过更多研究和实验后，availWidth 为 300 确实有意义 - 它是高度减去 20px 状态栏。换句话说，减去 OS chrome 而不是浏览器 chrome。对于较旧的 iOS 版本，该值也不正确，因此我不建议过度依赖它。
检查我对类似问题的回答，可能会有所帮助stackoverflow.com/questions/8205812/…

标签： javascript iphone safari screen

【解决方案1】：

我没有确切的答案，但您可以通过navigator.standalone 属性确定用户是在Mobile Safari 中还是在桌面书签中。有了这个，你可以决定是否减去 32px。

编辑：找到了答案。使用<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />，然后可以从window.innerWidth / window.innerHeight得到正确的值

【讨论】：

阅读了this，我得出了类似的结论。感谢您为我指明正确的方向。