Chrome DevTools 中的响应式模拟是不是总是准确的？

Posted 2023-03-07

【中文标题】Chrome DevTools 中的响应式模拟是不是总是准确的？

【英文标题】：Is the responsive-simulation in Chrome DevTools always accurate?Chrome DevTools 中的响应式模拟是否总是准确的？

【发布时间】：2020-03-20 04:23:19

【问题描述】：

所以我正在构建一个网站，并希望它具有响应性和移动兼容性。我一直在使用 Chrome DevTools 通过不同型号的设备查看网站，看起来还不错。无论如何，在我的手机上使用localtunnel 进行测试，背景图像的位置与 DevTools 上的视图不同。

DevTools 是否总是 100% 准确？或者这是否与 localtunnel 相关，或者完全不同？

尝试在线查找，找不到任何关于 DevTools 不准确的信息。

提前致谢， 杰克

【问题讨论】：

是的，并不总是呈现预期的结果。 Mobile Optimisation - Dev Tools can be wrong

我使用Chrome Dev Tools 和手动窗口分辨率更改扩展Res Changer 的组合，在两者之间，它似乎工作正常

酷，所以根据this forum，background-attachment:fixed 不适用于 ios，这可以解释为什么您的背景图像不在您预期的位置。

This 可能是您的解决方案？

老实说，听说 iOS 如何处理视差，我打算在移动设备上禁用它。这只是我有点担心的位置变化。谢谢

【参考方案1】：

因此，这个问题需要考虑几件事情。

Chrome 开发工具并不总是准确的

首先，Chrome Dev Tools 并非 100% 准确。事实上，我使用扩展名Resolution Test 和Chrome Dev Tools 来测试不同的屏幕尺寸/分辨率。

您可以在此处阅读有关 Chrome 开发工具错误问题的更多信息：Why Chrome DevTools Is Inaccurate for Mobile Testing

对浏览器和设备的不同支持

同样，不同的浏览器对 CSS 元素/功能的支持程度也不同。例如，E11 几乎不支持复杂的 CSS 功能，除非它带有前缀，尽管它在 Chrome/Firefox/Safari 中运行良好。

使用此工具检查您希望在各种浏览器上实现的各种 CSS 功能的兼容性：Can I use

Parralax 在大多数移动设备上不受支持或无法正常工作

您可以在此处阅读有关此问题的更多信息：Parallax scrolling not working on mobile css

background-attachment:fixed 可能无法正确呈现或在移动设备上不受支持

阅读此论坛可以找到有关此问题的更多信息：Safari (ipad and iphone) renders background images incorrectly

但本质上，从您提供的 CSS 中，我可以看到您正在使用此 css 属性。

.front-banner  
    background-image: url("../img/frontbanner2.png"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
    height: 100vh; 
    width: 100%; 
    position: relative; 
    text-align: center; 
    overflow: hidden; 

阅读 Stack Overlow 中已解决的确切问题：How to replicate background-attachment fixed on iOS

background-position:center 也可能无法正确呈现或在移动设备上不受支持

您可以尝试将background-position:center 替换为以下内容：

background-position-x: 50%;
background-position-y: 0%;
background-position: center top;

根据这个现有的答案：CSS background-position not working in Mobile Safari (iPhone/iPad)

谢谢，希望这对以后的人有所帮助！

【参考方案2】：

您始终可以使用屏幕标尺 (see S/O post here) 并将窗口大小调整为您检查的纵横比。希望对您有所帮助！

编辑：另一个选项

如果你有足够的空间，你可以在模拟器中运行 android x86 (~3-4gb) 并调整模拟器的屏幕分辨率（这是我需要 android x86 的众多功能之一）

【讨论】：

感谢您的意见。问题是，DevTools 上的任何内容似乎都不准确——包括使用屏幕标尺。这些元素在真实手机上的反应完全不同。你对我还能尝试什么有什么建议吗？谢谢

我会评论这个，因为它完全有偏见（大声笑:)）但我更喜欢 firefox-dev-edition 出于这个原因。除此之外，我使用 android x86 来测试 android 网站。我只是在 openbox 设置中更改分辨率

是的，你说得很好，我真的应该使用多种不同的浏览器工具，以便 100% 确定它的响应能力。谢谢，我会考虑firefox。

没问题，祝你好运，让我们知道你发现了什么以及它是否适合你

【参考方案3】：

我只能根据我自己的经验说，我发现 Chrome 工具比 Firefox 中的工具更准确。但对于我的一些客户，我仍然更喜欢 crossbrowsertesting.com。在那里我可以用数百个真实设备进行测试。但它不是免费的。我的结论是：它不是 100% 准确的。

【讨论】：

感谢您的建议！打算尽快试用 crossbrowsertesting.com。

是的，这个工具很棒！我认为您可以免费试用它并将其用于 1 个左右的项目......玩得开心！

【参考方案4】：

我遇到了一个类似的问题，如果我指定了 chrome 模拟器，那么模拟一个 375px 的设备，它将呈现一个宽度为 900px 的 html 页面。原来我忘了在html文件中添加这个头：

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

对于登陆这里的人来说，这可能会有所帮助

【参考方案5】：

我不知道我是否有类似的问题，但是当我使用移动资源时，我将其切换到桌面，然后我再次将其切换回移动资源，某些 css 代码似乎无法正确呈现.. 在其他情况下，在我以前的项目中使用相同的 css 代码似乎可以正常工作...