meta name="viewport"不像预期那样起作用。

Question

我在我的网站www.ssd-vergleichen.de中有这个meta标签

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

它可以在安卓的标准浏览器中使用，但在Chrome中仍然无法使用。我想知道它是否在IOS中可用？

编辑2：不，它在iOS上也不能使用http://iphonetester.com/。

- Stefano L

---

请查看http://www.quirksmode.org/mobile/metaviewport/上的浏览器测试。其中详细说明了哪些设备正确实现了meta标签的每个部分。 - Stuart Young

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

- Romain Braun

Answer 2

你尝试过吗？

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

据我所知，width="device-width" 的作用是将布局宽度限制为设备的宽度。而将 initial-scale=1 设置为 1，则是告诉浏览器缩放比例为100%（即不进行缩放）。 更新

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

这段内容是关于如何正确缩放响应式网站。如果你的网站宽度固定为1100像素，设置“initial-scale=1”将不会显示整个页面。

引用了W3C中的使用Meta Viewport元素识别所需的屏幕尺寸。

- Colin Bacon

---

这也不起作用。而且 initial-scale=1 意味着网站根本没有缩放。我想你的意思是200%或者 initial-scale=2。 - Stefano L

抱歉，我指的是以100％缩放比例显示网页，即不进行缩放，但它似乎正在这样做。 - Colin Bacon

Answer 3

试试这个：

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

在 CSS 中放置这个：

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

- abdulelah

Answer 4

尝试：

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

没有 ;

- Ian Devlin

---

似乎适用于Android标准浏览器，但对于Chrome浏览器不起作用（请查看我的编辑）。 - Stefano L

我在我的网站上使用了上述代码，并且在Chrome上运行正常，所以可能有某些东西在干扰它。我会检查你的网站... - Ian Devlin

我已经清除了Chrome缓存。仍然存在这个问题...似乎在iPhone上也无法工作：http://iphonetester.com/ - Stefano L

这个有帮助吗：https://dev59.com/f2gu5IYBdhLWcg3wZmW8#12270403 - Ian Devlin

Answer 5

今天我遇到了同样的问题，但是通过调整target-densitydpi属性并将其设置为高，同时将宽度设置为设备宽度，我成功地解决了这个问题。

具体操作如下：

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

这解决了我的问题。

- Code Bunny

Answer 6

你应该写

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

我尝试了这个，它有效。

- braun3812