移动设备的背景尺寸答案

【问题标题】：Background size for mobile devices移动设备的背景尺寸
【发布时间】：2016-02-20 10:08:59
【问题描述】：

我正在尝试为以下移动设备制作背景图片：

body {
  background: url("/resources/img/background2.jpg") no-repeat fixed;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100% 100%;
}

在 Chrome 开发人员的工具中，它看起来不错，但在真实设备（屏幕尺寸较小）上则不然。为什么会这样，我该如何解决这个问题？

快照：

【问题讨论】：

可以上传快照吗？
@SherKhan 是的，我更新了

标签： html css background-size

【解决方案1】：

您想要一个可以在智能手机上按比例缩小的响应式背景图像。使用这个：

background-image:url('/resources/img/background2.jpg');
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

【讨论】：

【解决方案2】：

怎么样？

background-image: url("/resources/img/background2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

【讨论】：

在这种情况下，只有一半的图片屏幕
表示与屏幕比例不同。您可以使用媒体查询为不同的屏幕尺寸和设备方向提供不同的图像，但图像的一部分几乎总是会被截断。

【解决方案3】：

尝试使用<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

【解决方案4】：

这是最好的解决方案

body {
    background: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-attachment: fixed;
    background-color: #fff;
    -webkit-background-size: calc(100vw) calc(100vh);
    -moz-background-size: calc(100vw) calc(100vh);
    -o-background-size: calc(100vw) calc(100vh);
    background-size: calc(100vw) calc(100vh);
    }

【讨论】：