为什么meta“viewport”标签会让我的页面在Android设备上放大？

我想让我的网站在移动设备上更“响应”。为什么meta“viewport”标签会让我的页面在Android设备上放大？

我已经尝试了很多的“视口” meta标签，这是目前的变化：

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

但对于我的HTC生动某种原因，页面加载相当放大在：

HTC Vivid Screeny

任何想法，所以在网页上我的Android 100％，可见我如何调整视？

来源

2013-03-19 Kane

也许尝试这样的事：

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

我还在努力了解viewport是诚实的。但我想，我现在可能已经明白了。应将视口width设置为内容的默认可见宽度。例如：如果您只有<img/>和width: 320px，则如果您使用上述代码，则图像将为全屏。

来源

2013-03-19 19:52:55

不，长得一模一样。我甚至使用Chrome开发工具从我的PC进行调试，所以我可以确保它不是缓存问题。 – Kane 2013-03-19 19:57:03

@凯恩，我做了一个更新，也许这有帮助。但据我所知，你的布局现在不是很响应，也许你稍后再改变它。但目前你的最小宽度大约是1000px。这应该是你的视口宽度。 – 2013-03-19 20:44:21

不是，仍然不是解决方案，如果我将它设置为1000px我不能使用@media CSS查询来隐藏边栏，设置下拉菜单等。我认为你是对的，HTML/CSS布局需要一些工作才能真正做出反应。 – Kane 2013-03-20 00:02:27

initial-scale=1

导致它的负载放大，你可以删除它，或者用最大规模的或最小规模（无论什么你想实现）替换它。

来源

2013-03-19 19:58:59 Ian

我改变它只说“宽度=设备宽度”，但它仍然加载完全相同。 – Kane 2013-03-19 20:01:47

此代码为我工作伟大的...我希望它会为你工作太...

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

来源

2013-03-20 10:56:54 aftab

为什么meta“viewport”标签会让我的页面在Android设备上放大？

回答

相关问题