移动设备的背景大小

Question

我试图为移动设备制作背景图片，如：

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开发者中＆＃39;它看起来不错的工具，但在真实的设备上（屏幕尺寸较小）却没有。为什么会这样，以及如何解决这个问题？

快照：

Answer 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;

Answer 2

怎么样？

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

Answer 3

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

Answer 4

这是最好的解决方案

#container {
  width: 300px
}

#container>ol {
  margin: 0.5em 0 0;
  -webkit-margin-before: 0;
}

#container>ol>li>ol {
  list-style: lower-alpha;
  margin-left: -1.25em;
}

#container>ol.empty>li {
  list-style: none;
}

#container>ol>li.no-sub {
  padding-left: 1.25em;
  text-indent: 0;
}