logo标签列表

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

htmlcssresponsive-designgoogle-chrome-devtoolslocaltunnel
8

我正在建设一个网站，希望它能够响应式和移动兼容。 我一直在使用Chrome DevTools查看不同设备模型的网站，看起来很好。 无论如何，我尝试在手机上使用localtunnel进行测试时，背景图像与DevTools中的视图位置不同。

DevTools是否总是100％准确？ 还是这与localtunnel有关，或者是完全不同的事情？

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

提前感谢， 杰克

2
是的，它并不总是呈现预期结果。【移动优化-开发工具可能会出错】(https://mobile1st.com/why-chrome-devtools-is-inaccurate-for-mobile-testing/) - EGC
1
我使用 Chrome Dev Tools 和一个手动窗口分辨率更改扩展程序 Res Changer 的组合，两者之间似乎可以正常工作。 - EGC
2
说实话，从听说iOS如何处理视差效果开始，我就打算在移动端禁用它。只是我有点担心位置变化的问题。谢谢。 - Jack HK
1
现在正在测试，似乎在通过DevTools测试或调整窗口时结果相同，但在移动设备上仍然不居中。我想我需要尝试一下并更改分辨率等。感谢您的所有帮助。我是stackoverflow的新手，刚刚注册了一个帐户。如何将您的评论标记为答案并给它们点赞？我可以在答案上做到这一点，但不知道如何在评论上操作。 - Jack HK
1
嘿，@Jack HK，你目前不能将评论标记为答案，所以我可以在问题中发布我的信息供你标记为已接受，或者就只接受一下虚拟的鼓励：P - EGC
显示剩余13条评论
5个回答
9
这个问题有几个需要考虑的方面。
首先，Chrome Dev Tools并不总是100%准确的。实际上，我使用Resolution Test扩展与Chrome Dev Tools一起测试不同屏幕尺寸/分辨率。
你可以在这里阅读更多Chrome Dev Tool不准确的问题：为什么Chrome DevTools对移动测试不准确 同样地，不同的浏览器和设备对CSS元素/函数的支持程度也不同。例如，E11几乎不支持复杂的CSS功能，除非加上前缀，而在Chrome/Firefox/Safari中它能正常工作。

使用Can I use这个工具可以检查你想要在各种浏览器上实现的各种CSS特性的兼容性。

大多数移动设备不支持或无法正确使用视差效果

你可以在这里阅读更多关于这个问题的信息：移动端不支持css视差滚动效果

background-attachment:fixed可能在移动设备上无法正确渲染或不被支持

关于这个问题的更多信息可以在这个论坛上找到：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-attachment fixed

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

您可以尝试用以下内容替换background-position:center:

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

根据现有答案：CSS background-position在移动Safari（iPhone / iPad）中无法工作，希望这能帮助未来的某个人！
1
你可以使用屏幕标尺(在这里查看S/O帖子)，调整窗口大小到你需要的纵横比。希望能有所帮助！
编辑：另一个选项是，如果你有足够的空间，可以在模拟器中运行Android x86（约3-4GB），并调整模拟器的屏幕分辨率（这是我需要Android x86的许多功能之一）。
谢谢您的输入。问题是，DevTools 上的任何东西似乎都不准确 - 包括使用屏幕标尺。元素在真实手机上的反应完全不同。您有什么其他建议可以尝试吗？谢谢。 - Jack HK
1
我会加上注释，因为这完全是有偏见的（哈哈 :)），但出于这个原因，我更喜欢firefox-dev-edition。除此之外，android x86是我用来测试Android网站的工具。我只需在openbox设置中更改分辨率即可。 - Werlious
是的，你说得很对，我应该使用多种不同的浏览器工具来确保它的响应性达到100%。谢谢，我会考虑使用火狐浏览器。 - Jack HK
没问题，祝你好运。请告诉我们你发现了什么，以及是否对你有用。 - Werlious
1
我只能从自己的经验中说，我发现Chrome工具比Firefox的工具更准确。但对于我的一些客户，我仍然更喜欢crossbrowsertesting.com。在那里，我可以测试数百个真实设备。但它不是免费的。我的结论是：它不是100％准确的。
谢谢您的建议！我会尽快尝试crossbrowsertesting.com。 - Jack HK
是的，这个工具非常棒！我认为你可以免费尝试并将其用于一个项目或类似的用途... 玩得开心！ - TYPO3 Freelancer
0

我不知道是否有类似的问题，但当我在移动分辨率下使用时，然后切换到桌面分辨率，再切换回移动分辨率时，某些 CSS 代码似乎无法正确渲染... 在其他情况下，相同的 CSS 代码在我的以前项目中似乎运行良好...

0
我遇到了类似的问题，如果我指定Chrome模拟器以375像素模拟设备，它会呈现一个宽度为900像素的HTML页面。结果发现我忘了在HTML文件中添加此标题：
<meta name="viewport" content="width=device-width, initial-scale=1">

对于来到这里的人可能会有所帮助

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接