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

我试图找到一种方法将网站正文元素的大小设置为可用屏幕的大小。在桌面浏览器上，很容易：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, ...)给了我有关使不寒而栗它可以跨设备使用：

因此我的问题：

有没有一种可靠的，最佳实践的方式来实现设置主体元素的大小等移动设备上的页面占用所有可用的屏幕房地产（包括将地址栏推到屏幕外），但是没有更多？额外的功劳：可以这样做，这样用户仍然可以放大（但不是在页面上）？至少在桌面上（IE6 +，Opera，Chrome，Firefox，Safari）以及移动设备上，尽可能多的设备都可以使用，不管是使用JavaScript还是CSS，或者两者兼而有之。（手机，平板电脑，Android，iOS，Windows Mobile）。

来源

2013-04-14 Markus A.

我不完全清楚你在哪里与此标题，但看看这些建议是否有帮助。

的元标记，试着

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

我不知道是否需要目标densitydpi =高DPI。如果有必要，很容易更换。

对于CSS

html, 
body { 
    height: 100%; 
    }

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

祝你好运！

来源

2013-04-14 12:20:28

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

回答

相关问题