gpt4 book ai didi

html - Chrome DevTools 中的响应式模拟是否始终准确?

转载 作者:行者123 更新时间:2023-11-28 10:24:04 27 4
gpt4 key购买 nike

因此,我正在构建一个网站,并希望它能够响应并与移动设备兼容。我一直在使用 Chrome DevTools 通过不同型号的设备查看该网站,它似乎没问题。无论如何,使用 localtunnel 去测试它在我的手机上,背景图像的位置与 DevTools 上的 View 不同。

DevTools 总是 100% 准确吗?或者这在某种程度上与 localtunnel 相关,还是完全不同的东西?

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

提前致谢, jack

最佳答案

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

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

首先,Chrome 开发工具 并非 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)

谢谢,希望这对以后的人有帮助!

关于html - Chrome DevTools 中的响应式模拟是否始终准确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59022312/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com