尽管有元视口标签，Firefox 移动版仍可缩放视口

Question

我正在使用这个元标记来设置移动浏览器的视口大小：

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

这个 css 可以确保较大的图像不会导致在较小的视口上滚动：

img { max-width: 95%; }

内容的宽度在任何时候都不是强制的。 （CSS 在大多数情况下使用 max-width）

它在 android 上的 chrome 上完美运行，但在 firefox mobile 上，它会更改视口大小以适应图像。

这使得带有和不带有图像的页面看起来不一致 - 网站看起来缩小了，而且文字有点太小了。

对此我能做些什么？

This 是网站。

---

更新

正如 J. Prakash 所说，问题在于我的页面的总宽度不是 100% 的视口。

因为我想在我的内容上使用 1em 填充，并使用 max-width 来允许重排，所以我在我的媒体查询中添加了这个：

body, #content { width: 100%; }
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

Answer 1

您的视口似乎是正确的。你的 CSS 不是。要获得预期的行为，您需要将站点宽度调整为最大 100%，而不是固定的像素宽度。

这会导致完整的代码审查并部分重建您的网站 css（和 html）。

"

查看此链接https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag