为什么旋转我的设备后没有显示第二个背景图像？

Question

我有两个背景图像来创建分层效果并保持文件较小。背面有一个重复的星形图案，顶部有一个白色的“切口”（后者有两个版本：桌面版和移动版）。将 my code 剥离到最基本的部分，这就是宽度大于 740 像素的设备上的外观：

我在桌面上的所有测试都达到了预期的效果。但是当我把它带到我的手机上时，三星 Galaxy s9，并将设备旋转到横向模式（宽度 >740），顶部背景图像消失：

更奇怪的是，内容的长度似乎打破了背景。如果删除一个段落，顶部背景图像将再次显示。我已经测试了单行文本和图像——它们似乎都等于页面的长度。

我的代码 (see it in JSFiddle) 非常基础，长期以来一直得到广泛支持，所以它只是这个特定设备上的一个小故障吗？还是动作或旋转导致问题？

body {
  min-height: 100vh;
  background-color: #200047;
  background-image: url(bg_cutout.png), url(background.jpg);
  background-position: center top, left top;
  background-attachment: scroll, fixed;
  background-repeat: repeat-y, repeat;
}

@media screen and (max-width: 740px) {
  body {
    background-image: url(bg_cutout_m.png), url(background.jpg);
    background-position: left top, left top;
  }

  .desktop {
    display: none;
  }
}

我更希望找到一个纯粹的 CSS 解决方案，但我花了很多时间解决这个问题，所以我很乐意 JavaScript 或 jQuery 修复以及。任何能为我指明正确方向的东西都将不胜感激。

Answer 1

问题不在代码中，而是在背景图像本身中，结果对于 Android 上的 Chrome 来说太大了。似乎不支持宽度为 4000 像素或更大的图像。

尽管原始文件相对较小 (35 kb)，但尺寸却相当大 – 8050 x 768 像素。我最初把它做得这么大是为了确保它即使在 8k 屏幕上也能无缝显示。我从来没有打算让手机使用大图像，但由于设备的高分辨率，它无论如何都会在横向模式下拾取它。

我的解决办法是现在拥有 3 个版本的剪切背景图像（1 个用于移动设备，1 个用于小于 4000 像素的屏幕，1 个用于更大的屏幕）并使用媒体查询调用它们。

将 Chrome 的功能用于 remote debug an Android device 对解决此问题非常有帮助，以防其他人遇到莫名其妙只出现在 Android 上的问题。 ;)

为什么旋转我的设备后没有显示第二个背景图像？

Why is the second background image not displaying after rotating my device?

css

android

background

background-image

samsung-galaxy