Question

谷歌Chrome和Mozilla Firefox在使用模拟器进行渲染输出时似乎没有产生相同的结果。

例如，谷歌浏览器似乎显示iPhone X（纵向模式下为375x812，设备像素比为3）的渲染非常小。

根据我的计算，h1 - 我设置为72px，似乎最终字体大小为24px（即72/3，其中3是设备像素比率）。平板电脑不会发生这种情况（例如iPad Pro，设备像素比为2）。

我预计平板电脑的字体大小为72px / 2 = 36px，但它不是。它被正确渲染，作为像素比率为1的设备（例如桌面）。

为什么移动设备或像素比率为3或以上的设备只会发生这种情况？当然，Mozilla Firefox似乎没有发生这种情况，其中所有这些设备的字体大小都相同。

在这种情况下，哪种浏览器的呈现是正确的？谷歌Chrome或Mozilla Firefox？

截图如下。

Answer 1

包含这样的元标记。

<meta name=viewport content="width=device-width, initial-scale=1">

大多数人在不知情的情况下贬低问题。他们不仅仅是基础知识，这些人无法依赖像bootstrap这样的框架来构建网站。在那里，这不会成为一个问题，因为它已经被专家照顾。