3

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

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

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

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

因此，对于移动设备，似乎正确设置体高的唯一方法是将其设置为像素大小而不是 100%。但是阅读这篇关于所有不同可用尺寸度量（screen.height、window.outerheight、...）的文章让我对让它跨设备工作感到不寒而栗：

因此我的问题是：

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

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

4

1 回答 1

4

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

对于元标记，请尝试 

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

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

对于 CSS 

 html,
 body {
    height: 100%;
  }

并且为了隐藏地址栏，我之前用过这段代码，效果不错，或者这里是另一个我没用过的

祝你好运！

于 2013-04-14T12:20:28.047 回答