关于移动端浏览器背景图片显示问题

这个问题困扰了我几次，每次都让我花了许多时间去解决。【大概每次解决之后都忘记了】

问题描述

1.找一张合适的背景图片

2.设置body的背景样式

@media screen and (max-width:480px){
    body{
        background: url('1.png') no-repeat fixed center;
        background-size: cover;
    }
}

3.pc端浏览器模拟显示

乍一看，没有出现任何问题。

4.再来看看移动端浏览器

4.1 若body的高度是100vh，则效果一样，但body的高度小于或者大于100vh就会出现问题。

4.2 <100vh，背景伸张不开

4.3 若>100vh，背景图片会显示不全

5.所以这就让我十分苦恼，想尽了许多办法，也百度了很多次，可惜都没能找到想要的答案，后来不知道是回忆起了什么，还是其他什么。

解决方案

主要原理：定义一个底层div，给底层div设置绝对定位fixed，设置高度100vh,宽度100vw，这样就可当做背景了。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            min-height: 250vh;
            min-width: 100vw;
        }
        .body-bg{
	    background:transparent;
	}
	@media screen and (max-width:480px){
	    .body-bg{
	        background: url('1.png') fixed no-repeat center;
		background-size: cover;
		position: fixed;
		z-index: -1;
		width: 100vw;
		height: 100vh;
	    }
        } 
    </style>
</head>
<body>
    <div class="body-bg"></div>
</body>
</html>

可以看到这里body的高度设置的250vh，远远大于100vh，看看效果：

效果十分不错。

测试环境

1.pc端：win10 chrome 71.0

2.移动端：android 8.1.0 via 浏览器

『 原创 』 关于移动端浏览器背景图片显示问题

『原创』关于移动端浏览器背景图片显示问题