html - meta name="viewport" 不能按预期工作

Question

我的网站 www.ssd-vergleichen.de 中有那个元标记

<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>

防止设备初始放大网站。当我在三星 Galaxy S2 上的 chrome 移动浏览器上观看该网站时，该网站正在放大约 400%。我做错了什么？任何人都可以帮忙吗？

提前致谢

编辑：使用

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

它可以在 Android 的标准网络浏览器中运行，但仍然不能在 Chrome 中运行。我想知道它是否适用于IOS？

Edit2：不，它也不适用于 iOS http://iphonetester.com/

Answer 1

尝试这个 ：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Answer 2

你有没有尝试过

<meta name="viewport" width="device-width">

据我了解，它将width="device-width"布局的宽度限制为设备宽度。当然设置intial-scale=1是告诉浏览器缩放 100%（即不缩放）？

更新

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

旨在用于正确扩展响应站点。考虑到您的网站固定为 1100 像素的宽度，设置initial-scale=1不会导致整个页面可见。

从 W3C使用 Meta Viewport 元素来确定所需的屏幕尺寸

Answer 3

尝试：

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

没有;

Answer 4

我今天遇到了同样的问题，我可以通过玩弄 target-densitydpi 属性并将其设置为 high 同时将宽度设置为 device-width 来解决它

像这样：

<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">

这解决了我的问题。

Answer 5

尝试这个：

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

在 CSS 中放这个：

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 6

你应该写

<meta id="viewport" name="viewport" content="[your_content_params]" />

我试过了，它奏效了。