HTML＆amp; CSS - 缩放背景以适应移动屏幕

Question

我在使用Xperia Z1屏幕的背景图片时遇到问题，我不知道如何正确地做到这一点。

body
{
  background-image: url('bg.jpg'); 
  background-repeat: no-repeat; 
  background-position: center;
  background-attachment: fixed;       
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%; 
}  

这是我目前的CSS代码。背景图像应根据屏幕分辨率自定义其分辨率。

桌面截图：

移动屏幕截图

Answer 1

将此添加到您的头标记以定义移动视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">