将网站设置为在所有移动设备上全屏
我正在尝试找到一种方法来将网站的body元素的大小设置为可用屏幕的大小。在桌面浏览器上，这很容易：width=height=100%，但在移动设备上就没那么简单了：
许多设备默认使用某些初始缩放设置，以尝试以最佳可读比例显示页面。对于安卓系统，我可以使用以下<head>-tag将其关闭：
<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=high-dpi, initial-scale=1.0>现在，设置body的宽度就像预期的那样(在Android下)。高度是一个完全不同的问题，因为浏览器会根据地址栏的当前位置设置100%的含义。因此，如果您的页面最初比可见的要长，并且已滚动到地址栏不在屏幕上，则将height设置为100%可获得所需的效果。但是，一旦用户向下移动页面以显示地址栏，高度就会更新，因此不再可能向后滚动到另一个方向。
因此，对于移动设备，似乎正确设置机身高度的唯一方法是将其设置为像素大小，而不是100%。但阅读this article on all the different available size measures (screen.height, window.outerheight, ...)时，让我不寒而栗的是要让它跨设备工作：
因此我的问题是：
有没有一种可靠的最佳实践方法可以在移动设备上设置body元素的大小，使页面占用所有可用的屏幕空间(包括将地址栏推到屏幕外)，但不能再多了？额外的好处:是否可以这样做，这样用户仍然可以在页面上放大(但不能缩小)？
我完全可以接受使用JavaScript或CSS的解决方案，但它们应该适用于尽可能多的设备，至少在桌面(IE6+，Opera，Chrome，Firefox，Safari)和移动设备(手机，平板电脑，安卓，iOS，Windows Mobile)上都可以使用。
回答 1
Stack Overflow用户
发布于 2013-04-14 20:20:28
我不完全清楚你的目标是什么，但看看这些建议是否有帮助。
对于meta标记，请尝试
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 我不确定是否需要target-dpi=high-dpi。不过，如果需要的话，可以很容易地进行替换。
对于CSS
html,
body {
height: 100%;
} 为了隐藏地址栏，我以前使用过this code with good results或here's another that I haven't used
祝好运!
https://stackoverflow.com/questions/15997137
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号