所以我正在建立一个网站，并希望它具有响应性和移动兼容性。我一直在使用Chrome DevTools通过不同型号的设备查看网站，这似乎很好。无论如何，在我的手机上使用本地隧道对其进行了测试，背景图像的位置与 DevTools 上的视图不同。
DevTools 总是 100% 准确吗？或者这与本地隧道或完全不同的东西有关？
尝试在线查找，找不到有关DevTools不准确的任何内容。
提前感谢， 千斤顶
因此，这个问题需要考虑几件事。
Chrome 开发工具并不总是准确的
首先，Chrome Dev Tools不是100%准确的。事实上，我将扩展程序分辨率测试与Chrome开发工具结合使用来测试不同的屏幕尺寸/分辨率。
您可以在此处阅读有关 Chrome 开发工具不准确问题的更多信息：为什么 Chrome DevTools 对于移动测试不准确
浏览器和设备上的不同支持
同样，不同的浏览器对CSS元素/函数的支持程度也不同。例如，E11几乎不支持复杂的CSS功能，除非它有前缀，尽管它在Chrome/Firefox/Safari中运行良好。
使用此工具检查您希望在各种浏览器上实现的各种 CSS 功能的兼容性：我可以使用
Parralax 在大多数移动设备上不受支持或无法正常工作
您可以在此处阅读有关此问题的更多信息： 视差滚动在移动 CSS 上不起作用
背景附件：修复可能无法正确呈现或在移动设备上受支持
有关此问题的更多信息，请阅读此论坛：Safari(iPad 和 iPhone(错误地渲染背景图像
但从本质上讲，从您提供的 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-x: 50%;
background-position-y: 0%;
background-position: center top;
根据这个现有的答案：CSS 背景位置在移动 Safari (iPhone/iPad( 中不起作用
谢谢，希望这对将来的某人有所帮助！
您可以随时使用屏幕标尺(请参阅此处的 S/O 帖子(并将窗口大小调整为检查的纵横比。希望对您有所帮助！
编辑：另一种选择
如果你有足够的空间，你可以在模拟器中运行android x86(~3-4gb(并调整模拟器的屏幕分辨率(这是我需要android x86的众多事情之一(
根据我自己的经验，我只能说我发现Chrome工具比Firefox中的工具更准确。但对于我的一些客户，我仍然更喜欢 crossbrowsertesting.com。在那里，我可以用数百台真实设备进行测试。但它不是免费的。我的结论是：它不是100%准确的。
我遇到了类似的问题，如果我指定 chrome 模拟器，因此模拟 375px 的设备，它将呈现一个宽度为 900px 的 html 页面。原来我忘了在 html 文件中添加这个标头：
<meta name="viewport" content="width=device-width, initial-scale=1">
对于登陆这里的人来说，这可能会有所帮助
我不知道我是否有类似的问题，但是当我用于移动res时，我将其切换到桌面，然后再次将其切换回移动res某些css代码似乎无法正确呈现..在其他情况下，在我以前的项目中使用相同的CSS代码似乎可以正常工作...