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

Question

所以我正在建立一个网站，并希望它具有响应性和移动兼容。我一直在使用 Chrome DevTools 通过不同型号的设备查看该站点，它似乎没问题。无论如何，在我的手机上使用localtunnel对其进行了测试，背景图像与 DevTools 上的视图位于不同的位置。

DevTools 总是 100% 准确吗？或者这与 localtunnel 有某种关系，还是完全不同的东西？

尝试在网上查找，找不到有关 DevTools 不准确的任何信息。

提前致谢，杰克

Answer 1

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

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

首先，Chrome Dev Tools不是100%准确。事实上，我将扩展分辨率测试与Chrome 开发工具结合使用来测试不同的屏幕尺寸/分辨率。

您可以在此处阅读 Chrome Dev Tool innacuracy issues 中的更多信息：Why Chrome DevTools Is Inaccurate Is Inaccurate for Mobile Testing

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

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

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

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

您可以在此处阅读有关此问题的更多信息：视差滚动不适用于移动 css

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

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

但本质上，从您提供的 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 中已经解决的这个确切问题：如何复制 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)

谢谢，希望这对将来的人有所帮助！