android - 如何修复桌面 Chrome 的移动模拟器与移动设备上的实际 Chrome 之间的 CSS 行为不一致？

Question

当我在 Chrome 上使用我的网站模拟移动设备时，布局是我想要的:

Link to image

但是，当我实际运行我的移动网站(Android 上的 Chrome)时，它看起来并不一样:

Link to image

我不确定是什么导致了这个问题，因为它对两者使用了相同的 CSS。

我在我的 html 中声明了一个 div 元素，其中包含一类 header-image，在我的 scss 文件中我有:

.header-image {
  background: url('/assets/images/31163086090_fdac6a25c4_o.jpg') no-repeat fixed center;
  background-size: cover;
  background-position: 50% -30vh;
  height: 60vh;
}

我之所以插入这样的图片是因为我希望它在我向下滚动时保持静止。在桌面版 Chrome 上，一切都按照我想要的方式运行。有什么建议吗？

编辑:您可以查看站点 here如果您想查看它在您的设备上的样子。

Answer 1

我目前无法对其进行测试，但您似乎需要在图像风格上相当明确。

这个主题已在 Stack Overflow 上得到解决，其中个人希望在计算机和移动 Chrome 浏览器之间保持图像一致。看看这个答案HERE .