Google chrome devtools 与真实移动视图相比，Chrome开发工具无法提供准确的移动视图

我试图使我的网页移动友好。因此，我正在使用ChromeDevTools设计我的网页的移动版本。我在DevTools中有我想要的外观。我将它上传到我的网站，并在实际的手机上查看它&对象与DevTools中的对象不在同一位置。我在DevTools中使用了iphone6手机设计，并在实际的iphone6上查看了它。他们不匹配。还有其他人有这个问题吗？我读过有关这方面的文章，但不知道如何解决它。有什么想法吗？我应该使用不同的模拟器吗

这是iPhone 6上的Chrome开发工具版本：

这就是iphone6的真实外观：

---

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

Mac用户可以使用模拟器来模拟任何苹果移动设备，并准确地看到他们的网站将如何显示在其上。您可以使用它打开Safari并访问您的

localhost

。我用它来修复我网站上的问题，这些问题我无法在DevTools中重现

---

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

您好，我注意到在您的开发工具的第一个屏幕快照上，缩放为%90。你能试着把它改成100%吗。你能在iPhone浏览器上滚动吗？还是你看到的是全屏？它只是限制了查看端口，而不是模拟设备。我在DevTools上将其更改为100%&装饰物仍然保持在相同的位置。是的，我可以在iPhone浏览器上向下滚动。这就是为什么你在手机屏幕截图中看不到整个画面的原因。为了在手机上看到整棵树的截图，我不得不向下滚动，这样它就不会捕捉到顶部的圣诞快乐标志。为什么我会因为问这个问题而被降级？我使用了Safari的响应模式&这确实有助于更准确地描述iPhone上的外观。作为一名网络开发人员，我们并不总是拥有所有的设备。有时我们只有模仿。你对如何解决这个问题还有其他建议吗？我们希望我们的网站在每台设备上都保持一致，但似乎是这样impossible@KolobCanyon你试过了吗？嗨，我也遇到了这个问题。DevTools已经非常有用了。你在这个工具上投入的工作是有回报的，因为很多人都在使用它。因此，如果有可能改进iphone等主要设备的模拟，请遵循以下路径。有很多人不能每月为一个方面投资30美元。