背景图像在桌面上是 100% 的屏幕，但在移动设备上不是

Question

这是我的fiddle

图像将始终覆盖桌面的整个屏幕，大小为 window。

但是在移动端，它并没有覆盖整个屏幕，为什么？

代码

<h1>Hello</h1>

CSS:

   body  {

    margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */


}

Answer 1

您的 body 不是 window 身高的 100%，因此如果您添加

html, body {
  height: 100%;
}

然后它覆盖了整个页面。演示：jsfiddle

Answer 2

在css

之后更新

body, html {
  min-height:100%;
  height:100%;  /* if not working try vh instead of % */
}

body, html {
  min-height:100%;
  height:100%;  /* if not working try vh instead of % */
}
body  {
 
 margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */
 
 
}

<h1>Hello</h1>

Answer 3

background-size: cover 使背景图像尽可能大而不拉伸它，您可以在这里阅读 w3schools:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

你的手机背景不是全高是因为你的body标签没有高度。

body  {
    margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */
    height: 100vh;
}

<h1>Hello</h1>

JSFiddle

背景图像在桌面上是 100% 的屏幕，但在移动设备上不是

Background image is 100% of the screen on desktop but not on mobile

html

css

responsive-design

responsive