更准确的模拟器，Google Chrome 还是 Mozilla Firefox？答案

【问题标题】：More accurate emulator, Google Chrome or Mozilla Firefox?更准确的模拟器，Google Chrome 还是 Mozilla Firefox？
【发布时间】：2017-12-15 14:35:19
【问题描述】：

Google Chrome 和 Mozilla Firefox 在使用模拟器渲染输出时似乎不会产生相同的结果。

例如，Google Chrome 似乎显示 iPhone X（纵向模式下为 375x812，设备像素比为 3）的字体非常小。

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

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

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

在这种情况下哪个浏览器的渲染是正确的？ Google Chrome 还是 Mozilla Firefox？

截图如下。

Google Chrome Screenshot

Mozilla Firefox Screenshot

【问题讨论】：

嗨！请提供代码的minimal reproducible example - 在 Stack Overflow 上寻求帮助时，屏幕截图不能替代代码。
Chrome 或 Firefox 也没有真正的模拟器，背后的 CSS 引擎是相同的，但是它们模拟触摸输入或显示大小等一些东西。如果你真的想要一个真正的模拟器，你应该寻找一个虚拟设备
好的，@TylerH。谢谢

标签： javascript html css

【解决方案1】：

像这样包含元标记。

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

这里的大多数人在什么都不知道的情况下降低了问题的评分。他们不只是了解基础知识，这些人如果不依赖像 bootstrap 这样的框架就无法构建网站。这不会有问题，因为它已经由专家处理了。

更多详情，请参考this excellent w3schools article

【讨论】：