html - CSS 响应式设计 : weird mobile scaling issue

Question

我正在制作一个非常简单的网站，它将实现两种样式表:一种用于桌面用户，一种用于移动用户。

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

如您所见，移动浏览器不断使用某种缩放比例，我找不到原因，对所有内容单独使用。页脚右侧面板上的图标都是 32px 的固定大小，但不知何故它们在 View 之间的缩放比例不同。两个 View 的样式表相同，所有字体都基于 em 单位，但即使它们彼此不成比例...

这里发生了什么？

Answer 1

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

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

当你这样放置它时，它会像在浏览器中一样出现。当您将视口(viewport)更改为 1 时，它将放大(双倍)。