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

Question

我正在尝试使我的网站在移动设备上更具“响应性”。

http://healthybodyguru.com

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

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

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

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

Answer 1

Maybe try something like this:

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

I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.

Answer 2

initial-scale=1

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

Answer 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);