为什么元“视口”标签让我的页面在 Android 设备上看起来被放大了？答案

【问题标题】：Why does the meta "viewport" tag make my page looked zoomed in on Android device?为什么元“视口”标签让我的页面在 Android 设备上看起来被放大了？
【发布时间】：2013-03-19 19:51:12
【问题描述】：

我正在努力让我的网站在移动设备上更具“响应性”。

http://healthybodyguru.com

我已经尝试了很多“viewport”元标记的变体，目前是：

<meta name="viewport" content="width=device-width, initial-scale=1" />

但由于某种原因，在我的 HTC Vivid 上，页面加载时非常放大：

有什么想法可以调整视口以使页面在我的 Android 上 100% 可见吗？

【问题讨论】：

标签： html css responsive-design meta-tags viewport

【解决方案1】：

不妨试试这样的：

<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>

老实说，我仍在努力理解viewport。但我想，我现在可能明白了。视口width 应设置为内容的默认可视宽度。例如：如果你只有一个<img/> 和width: 320px，那么如果你使用上面的代码，图像将是全屏的。

【讨论】：

不，看起来一模一样。我什至使用 Chrome 开发工具从我的电脑上进行调试，所以我可以确保这不是缓存问题。
@Kane，我做了更新，也许这有帮助。但据我所见，你的布局现在不是很响应，也许你以后改变它。但目前您的最小宽度约为 1000 像素。这应该是您的视口宽度。
不，仍然不是解决方案，如果我将其设置为 1000 像素，我将无法使用 @media CSS 查询来隐藏侧边栏、设置下拉菜单等。我想你没错，HTML/CSS 布局需要一些工作才能真正响应。
嗯，当然不是。但目前看来您页面的最小宽度约为 1000。您的媒体查询似乎没有改变这一点。如果您为320px <= x <= 480px 的屏幕宽度进行了特殊布局，则可以将视口宽度设置为320px，因为这是您的样式可以处理的最小宽度。

【解决方案2】：

initial-scale=1

导致加载放大。您可以将其删除，也可以将其替换为最大比例或最小比例（无论您想要实现什么）。

【讨论】：

我把它改成只说“width=device-width”，但它仍然加载完全相同。

【解决方案3】：

这段代码对我很有用……我希望它也对你有用……

// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

【讨论】：