CSS 响应式设计：奇怪的移动缩放问题
CSS responsive design: weird mobile scaling issue
我正在制作一个非常简单的网站，它将实现两种样式表：一种用于桌面用户，一种用于移动用户。
在处理移动样式表时，我发现了无法解释的严重不一致之处。下图展示了这种情况。左侧是在 Firefox 的响应式设计模式下查看的网站。右侧是在 Firefox Android 移动浏览器中查看的同一网站。两个视图中的视口完全相同，我已经检查并检查了三次。浏览器自身 window 的分辨率在两个图像中是相同的。
如您所见，移动浏览器不断使用某种缩放比例，我找不到原因，对所有内容单独使用。页脚右侧面板上的图标都是 32px 的固定大小，但不知何故它们在视图之间的缩放比例不同。两个视图的样式表是一样的，所有的字体都是以em为单位的，但即使它们彼此不成比例...
这里发生了什么？
您可能需要做的是更改网站头部的视口。
例如<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
当你这样输入时，它会像在浏览器中一样出现。当您将视口更改为 1 时，它将放大（双倍）。
我正在制作一个非常简单的网站，它将实现两种样式表：一种用于桌面用户，一种用于移动用户。
在处理移动样式表时，我发现了无法解释的严重不一致之处。下图展示了这种情况。左侧是在 Firefox 的响应式设计模式下查看的网站。右侧是在 Firefox Android 移动浏览器中查看的同一网站。两个视图中的视口完全相同，我已经检查并检查了三次。浏览器自身 window 的分辨率在两个图像中是相同的。
如您所见，移动浏览器不断使用某种缩放比例，我找不到原因，对所有内容单独使用。页脚右侧面板上的图标都是 32px 的固定大小，但不知何故它们在视图之间的缩放比例不同。两个视图的样式表是一样的，所有的字体都是以em为单位的，但即使它们彼此不成比例...
这里发生了什么？
您可能需要做的是更改网站头部的视口。
例如<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
当你这样输入时，它会像在浏览器中一样出现。当您将视口更改为 1 时，它将放大（双倍）。