html - 尽管有元视口(viewport)标签，Firefox 移动版仍可缩放视口(viewport)

Question

我正在使用这个元标记来设置移动浏览器上的视口(viewport)大小:

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

和这个 css 以确保较大的图像不会导致在较小的视口(viewport)上滚动:

img { max-width: 95%; }

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

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

这使得包含和不包含图像的页面看起来不一致 - 网站看起来缩小了，文本有点太小了。

我该怎么办？

This是网站。

---

更新

正如 J. Prakash 所说，问题是我的页面的总宽度不是视口(viewport)的 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

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

这会导致完整的代码审查和部分重建您网站的 CSS(和 HTML)。

”

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