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

浮生半日梦。 前端技术 2018年11月25日 68 ℃ 0 4

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

问题描述

    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 浏览器



● 作者:浮生半日梦。
● 标题:关于移动端浏览器背景图片显示问题
● 链接:https://www.aroad.xyz/article/14.html
● 來源:记忆荟 ● 风
● 版权:转载无需联系作者,但请注明出处。

评论:(0)
₍₍◡( ╹◡╹ )◡₎₎ no more ~