Question

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

许多设备默认为某些初始缩放设置，尝试以最佳可读范围显示页面。对于Android，我可以使用以下<head> - 标记：

关闭此功能

<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, ...)让我对让它在不同设备上运行感到沮丧：

因此我的问题是：

是否有一种可靠，最佳实践的方法来实现在移动设备上设置body元素的大小，使得页面占用所有可用的屏幕空间（包括将地址栏推离屏幕外），但不再有？额外的功劳：可以这样做，这样用户仍然可以在页面上放大（但不能放大）吗？

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

Answer 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

祝你好运！

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

1 个答案: