Chrome DevTools 中的响应式模拟是否始终准确？

Question

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

DevTools 总是 100% 准确吗？或者这在某种程度上与 localtunnel 相关，还是完全不同？

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

提前致谢，杰克

Answer 1

您始终可以使用屏幕标尺 () 并将 window 的大小调整为您检查的纵横比。希望对您有所帮助！

编辑：另一种选择

如果你有 space，你可以在模拟器中运行 android x86 (~3-4gb) 并调整模拟器屏幕分辨率（这是很多东西我需要 android x86 for)

Answer 2

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

Answer 3

所以这个问题有几个问题需要考虑。

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

首先，Chrome Dev Tools 并非 100% 准确。事实上，我使用扩展 Resolution Test in conjunction with Chrome Dev Tools 来测试不同的屏幕 sizes/resolutions。

您可以在此处的 Chrome 开发工具不准确问题中阅读更多内容：Why Chrome DevTools Is Inaccurate for Mobile Testing

浏览器和设备的不同支持

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

中运行良好

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

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

您可以在此处阅读有关此问题的更多信息：

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)

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

Answer 4

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

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

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

Answer 5

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

Chrome DevTools 中的响应式模拟是否始终准确？

Is the responsive-simulation in Chrome DevTools always accurate?

html

css

google-chrome-devtools

responsive-design

localtunnel