3

在台式机上，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..
}
4

2 回答 2

11

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

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

更多细节

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

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

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

于 2015-05-08T00:42:43.160 回答
0

有时它有助于为您的 html 文档定义视口：

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

至于我可以使用概述的 chrome for android 应该可以很好地处理这个问题。

接下来，您可以使用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 }

希望这可以帮助，

最好的问候，玛丽安。

于 2014-12-14T22:53:59.890 回答