CSS响应式设计：奇怪的移动缩放问题

Question

我正在制作一个非常简单的网站，它将实施两种样式表：一种针对桌面用户，另一种针对移动用户。

在使用移动样式表时，我发现了无法解释的狂野不一致。下面的图片展示了这种情况。左边是用Firefox的响应式设计模式查看的网站。右侧是在Firefox的Android手机浏览器中查看的同一个网站。两个视图中的视口完全相同，我已检查并检查并进行三重检查。浏览器自己的窗口的分辨率在两个图像中都是相同的。

正如你可以看到，移动浏览器不断使用某种比例的，我找不到原因，一切独立。页脚右侧面板上的图标都是32像素的固定尺寸，但它们在视图之间不同程度地缩放。样式表对于两个视图都是相同的，并且所有字体都基于em单位，但即使它们彼此不成比例。

这里发生了什么？

Answer 1

你可能需要做的是改变你的网站头部的视口。

例如<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">

当你把它像这样它会变成了完全一样的浏览器。当您将视口更改为1时，它将放大（双倍）。