移动网站在实际的 iPhone 12 VS chrome/firefox 开发工具上看起来不同？答案

【问题标题】：Mobile site looks different on an actual iPhone 12 VS chrome/firefox dev tools?移动网站在实际的 iPhone 12 VS chrome/firefox 开发工具上看起来不同？
【发布时间】：2021-10-13 04:09:50
【问题描述】：

您好，我正在构建一个天气应用程序，我正在使用 Firefox 和 Chrome 检查移动视图以检查它们在移动设备上的外观。

这是我的天气应用程序的链接： https://fervent-albattani-911414.netlify.app/?city=Beijing

在我的 Firefox 开发者工具上，这个应用程序的 iPhone 12 环境看起来很好，如下所示：

但是当我继续使用 iPhone 12 并将其横向放置时，它看起来像这样：

https://drive.google.com/file/d/1x_PNSlMpdu6RZjybLzx2aSJyoNF2CTS_/view?usp=sharing

我该如何解决这个问题？？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

开发者工具是一个模拟器，不是一个实际的表示。

但是由于模拟器不会复制实际物理移动设备的软件或硬件，因此它们具有严重的局限性，正如 Google 所承认的那样。简而言之，这些限制会导致严重的测试错误。谷歌甚至承认他们的模拟器无法准确地复制移动设备硬件中 GPU 和 CPU 的行为。

但谷歌没有提到 Chrome 移动模拟器的另外两个重大缺陷：

Chrome 和 Firefox 移动模拟器使用与 iOS 或 Android 不同的渲染引擎。这可以在模拟 Web 浏览器时显示 - Chrome 移动模拟器使用与 Safari 不同的 JavaScript 引擎，因为 Chrome 使用 V8，而 Safari 运行 JavaScriptCore/Nitro。这些差异会对您的实际分辨率产生很大影响。

注意：模拟通常最适合应用和网站模拟。（基于云的模拟器有助于减少使用模拟器的负面影响。）

对 mobile1st 的引用

【讨论】：

那么有没有关于在移动视图上测试我的网站的最佳位置的建议？
尝试浏览器堆栈实时免费试用。 - 它是一个模拟器，但对 android 和 IOS 几乎 100% 有效
我要补充一点，模拟器可能无法代表在物理设备上体验到的实际结果，因为它们有一些限制。