与真实移动视图相比，Chrome DevTools 无法提供准确的移动视图答案

【问题标题】：Chrome DevTools not giving accurate mobile view compared to real mobile view与真实移动视图相比，Chrome DevTools 无法提供准确的移动视图
【发布时间】：2019-06-03 14:19:32
【问题描述】：

我正在尝试使我的网页适合移动设备。所以，我正在使用 Chrome DevTools 来设计我的网页的移动版本。我拥有它在 DevTools 中的样子。我将它上传到我的网站并在实际的手机上查看了它，并且对象与它们在 DevTools 中的位置不同。我在 DevTools 中使用了 iPhone 6 移动设计，并在实际的 iPhone 6 上查看了它。它们不匹配。其他人有这个问题吗？我已阅读有关此问题的文章，但不知道如何解决。有任何想法吗？我应该使用其他模拟器吗？

这是 iPhone 6 上的 Chrome DevTools 版本：

这是它在 iPhone 6 上的真实外观：

【问题讨论】：

您好，我注意到您在开发工具的第一个屏幕截图上显示缩放比例为 %90。您可以尝试将其更改为 %100。你也可以在你的 iPhone 浏览器上滚动，还是你看到的全屏？
它只是限制视口，而不是真正模拟设备。
我在 DevTools 上将其更改为 100%，而饰品仍然保持在相同的位置。是的，我可以在 iPhone 浏览器上向下滚动。这就是为什么您在手机的屏幕截图中看不到整个图片的原因。为了在手机上截取整棵树的截图，我不得不向下滚动，这样它就没有捕捉到顶部的圣诞快乐标志。为什么我会因为提出这个问题而被降级？
我使用了 Safari 的响应模式，这确实有助于更准确地展示它在 iPhone 上的外观。

标签： google-chrome-devtools

【解决方案1】：

清除浏览器上的缓存以确保您的手机正在访问您的代码的最新更新。

【讨论】：

【解决方案2】：

Mac 用户可以使用 模拟器 模拟任何 Apple 移动设备，并准确查看他们的网站在其上的显示效果。您可以使用它打开 Safari 并访问您的localhost。我用它来解决我网站上的问题，我无法在 DevTools 中重现的问题。

【讨论】：

【解决方案3】：

这里是 DevTools 技术作家。 DevTools 只是对移动设备的模拟。它无法真正模拟 iPhone。因此，检查它在您关心的设备上的实际外观总是一个好主意（就像您所做的那样）。我认为这里没有任何错误或问题。这只是 DevTools 模拟没有 100% 反映现实的一个实例。

【讨论】：

作为 Web 开发人员，我们并不总是拥有所有可用的设备。仿真是我们有时得到的。你对如何解决这个问题有其他建议吗？我们希望我们的网站在每台设备上都保持一致，但这似乎是不可能的
@KolobCanyon 你试过BrowserStack吗？
您好，我也遇到了这个问题。 DevTools 已经非常有用了。你在这个工具上投入的工作是有回报的，因为有太多人在使用它。因此，如果可以改进 iphone 等主要设备的模拟，请遵循路径。有很多人不能在一个方面每月投资 30 美元。