CSS响应式设计：奇怪的移动扩展问题

Question

我正在创建一个非常简单的网站，它将实现两个样式表：一个用于桌面用户，另一个用于移动用户。

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

正如您所看到的，移动浏览器经常使用某种缩放功能，我找不到理由，因为单独的一切。页脚右侧面板上的图标都是32px的固定大小，但不知何故，它们在视图之间的缩放比例不同。两个视图的样式表是相同的，并且所有字体都基于em的单位，但即使它们彼此不成比例......

这里发生了什么？

Answer 1

您可能需要做的是更改网站头部的视口。

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

当你这样说时，它会像在浏览器中一样。将视口更改为1时，它将放大（双倍）。