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" 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 Use Meta Viewport Element To Identify Desired Screen Size

Answer 2

试试这个：

<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 3

尝试：

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

没有;

Answer 4

我今天遇到了同样的问题，我可以通过玩弄target-densitydpi属性并将其设置为高，同时将宽度设置为设备宽度来修复它

像这样：

<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]" />

我试过这个并且有效。