7

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

DevTools 总是 100% 准确吗？或者这是否与本地隧道有关，或者完全不同？

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

在此先感谢，杰克

4

5 回答 5

8

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

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

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

您可以在此处阅读有关 Chrome 开发工具不准确问题的更多信息：为什么 Chrome DevTools 对于移动测试不准确

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

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

使用此工具检查您希望在各种浏览器上实现的各种 CSS 功能的兼容性：我可以使用吗

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

您可以在此处阅读有关此问题的更多信息：Parallax scrolling not working on mobile 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:center用以下内容代替：

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

根据这个现有的答案：CSS background-position not working in Mobile Safari (iPhone/iPad)

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

于 2019-11-24T22:44:33.267 回答
1

您始终可以使用屏幕标尺（请参阅此处的 S/O 帖子）并将窗口大小调整为您检查的纵横比。希望能帮助到你！

编辑：另一种选择

如果你有空间，你可以在模拟器中运行 android x86 (~3-4gb) 并调整模拟器的屏幕分辨率（这是我需要 android x86 的许多事情之一）

于 2019-11-24T21:01:29.077 回答
1

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

于 2019-11-24T21:07:37.040 回答
0

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

于 2021-01-20T18:17:58.493 回答
0

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

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

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

于 2020-05-26T08:55:13.183 回答