在所有移动设备上将网站设置为全屏答案

【问题标题】：Setting a website to fullscreen on all mobile devices在所有移动设备上将网站设置为全屏
【发布时间】：2013-04-06 12:03:27
【问题描述】：

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

许多设备默认设置为尝试以最佳可读比例显示页面的初始缩放设置。对于 Android，我可以使用以下 <head>-tag 将其关闭：

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

现在，设置正文的宽度可以正常工作（在 Android 下）。高度是一个完全不同的问题，因为浏览器将根据地址栏的当前位置设置 100% 的含义。因此，如果您的页面最初比可见页面长并且已经滚动以使地址栏不在屏幕上，则将高度设置为 100% 具有预期的效果。但是一旦用户向下移动页面以显示地址栏，高度就会更新，因此无法再向另一个方向滚动。

因此，对于移动设备，似乎正确设置主体高度的唯一方法是将其设置为像素大小而不是 100%。但是阅读this article on all the different available size measures (screen.height, window.outerheight, ...) 让我对让它跨设备工作感到不寒而栗：

所以我的问题：

是否有可靠的最佳实践方法来实现在移动设备上设置正文元素的大小，以使页面占据所有可用的屏幕空间（包括将地址栏推离屏幕），但仅此而已?额外奖励：是否可以这样做，以便用户仍然可以放大（但不能缩小）页面？

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

【问题讨论】：

标签： mobile web fullscreen viewport

【解决方案1】：

我不完全清楚你的目标是什么，但看看这些建议是否有帮助。

对于元标记，试试

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

我不确定是否需要 target-densitydpi=high-dpi。如果有必要，很容易更换。

对于 CSS

 html,
 body {
    height: 100%;
  }

为了隐藏地址栏，我之前用过this code with good results，或者here's another that I haven't used

祝你好运！

【讨论】：