在所有移动设备上将网站设置为全屏显示

Question

我正在寻找一种方法来设置网站body元素的大小为可用屏幕的大小。在桌面浏览器上很容易实现：width=height=100%，但在移动设备上就不是那么简单了：

许多设备默认使用某些初始缩放设置，尝试以最佳可读比例显示页面。对于Android，我可以通过以下标签关闭此功能：

<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=high-dpi, initial-scale=1.0>

现在，在 Android 下设置 body 的宽度能够按预期工作。而高度则是一个完全不同的问题，因为浏览器将根据地址栏的当前位置来设置 100% 的含义。因此，如果您的页面最初比可见范围更长，并且已经滚动以使地址栏不可见，将高度设置为 100% 就会产生期望的效果。但是，一旦用户向下滑动页面以暴露地址栏，高度就会更新，以至于不再可能向另一个方向滚动。

因此，对于移动设备，似乎唯一正确设置 body 高度的方法是将其设置为像素大小而不是 100%。但阅读这篇关于所有可用尺寸测量的文章(screen.height、window.outerheight等)让我感到担忧，因为需要跨设备进行工作：

因此我的问题：

是否有一种可靠的最佳实践方法，可以在移动设备上设置 body 元素的大小，以便页面占用所有可用的屏幕空间（包括推出地址栏），但不超过屏幕大小？额外加分：是否可以做到这一点，使用户仍然可以放大页面（但不能缩小）？

对于我来说，使用JavaScript或CSS或两者都可以的解决方案都是完全可接受的，但它们应该在尽可能多的设备上工作，至少在桌面端（IE6+，Opera，Chrome，Firefox，Safari）和移动设备（手机，平板电脑，Android，iOS，Windows Mobile）上。

- Markus A.

Answer 1

我不完全清楚您的意思，但请看以下建议，希望能有所帮助。

对于 meta 标签，请尝试：

<meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0">  

我不确定是否需要使用target-densitydpi = high-dpi。如果必要，很容易更改。对于CSS部分：

 html,
 body {
    height: 100%;
  }  

为了隐藏地址栏，我之前使用过这个代码并取得了良好的效果，或者你可以尝试使用这个我没有用过的代码。

祝好运！

- David Taiaroa