android - 背景大小的封面不保持宽高比，android chrome

Question

在台式机上，当元素具有 background-size: cover 时，iPad 背景中的图像会保持其纵横比，但在我的 Android 手机(chrome)上，图像似乎更像 宽度:100%;高度:100%,

您可以 see it in action here.

Here's a screenshot from my phone

// Markup
<div class="wrapper">
  <div class="content">
...

// Style
html, body {
  height: 100%
}

.wrapper {
  position: relative;
  height: 100%;
  background-image: url(...);
  background-size: cover;
  ..vendor prefixes..
}

Answer 1

我遇到了类似的问题并且很难调试，但最终我设法找到了原因:图像像素大小。

TL;DR
不要使用大尺寸图片，移动设备不喜欢它们，使用最大 2000 像素宽的图片。

---

更多细节

简单地说，移动设备无法处理大尺寸图像，具体取决于型号和操作系统。结果可能会有所不同:有些可能会简单地中断，有些会显示空白图像或像这个问题中的那样扭曲，有时甚至会返回 404 错误! (去过那里，做过那个)。

我在 SO 和网络其他地方的很多地方都找到了关于这个问题的信息，这是一篇很好的文章，它有一个很好的工具来计算图像大小:
http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/ .

根据我的测试，使用的理想图像大小不应超过 2000 像素，主要是为了支持最大(也是最古老)的移动设备部分，但建议根据您的需要进行测试。