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 时，它将放大（双倍）。