Question

在台式机上，iPad背景中的图像在元素background-size: cover时保持其宽高比，但在我的Android手机（Chrome）上，图像看起来更像width:100%;height:100%，

// 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请勿使用大尺寸图片，移动设备不喜欢使用大图，使用max 2000px宽图片。

更多细节

简而言之，移动设备无法处理大尺寸图像，具体取决于型号和操作系统。结果可能会有所不同：有些可能会破坏，有些可能会显示空白图像或此问题中的扭曲，有时甚至会返回404错误！（去过那里，完成了）。

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

使用的理想图像尺寸不应超过我测试的2000px，主要是为了支持移动设备中最大（也是最旧）部分，但建议根据您的测试结果进行测试需要。

Answer 2

有时为html文档定义视口会有所帮助：

html{
  height:100%;
  min-height:100%;
  width: 100%;
  min-width: 100%;
}
body{
  min-height:100%;
  min-width: 100%;
}

在can i use outlined上，对于android来说，chrome应该可以很好地处理这个问题。

接下来，您可以使用media queries来创建变通方法，因为手机上的chrome不会按照应有的方式处理cover属性：

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    .wrapper {
      background-image: url(...);
      background-size: auto 100%;
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
   .wrapper {
      background-image: url(...);
      background-size: 100% auto;
    }
}

这很简单，但做得很好。如果要将此css限制为仅适用于较小的设备，则可以扩展媒体查询，如

@media screen and (orientation:landscape) and (max-width: 400px) { add css }

希望这有帮助，

最好的问候，玛丽安。

背景大小覆盖不保持纵横比，android chrome

2 个答案: