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

尽管有meta视口标记，但Firefox移动可以缩放视口

1 个答案: