解决iphonex屏幕过长背景图片或者放在元素里面的图片不能铺满的问题

目前有四种方法

1.让设计单独设计一版iphonex的尺寸的图，用js代码判断设备，如果检测到是iphonex就换图

//如果设备是iphonex则追加元素填补空余
           function isIPhoneX(fn){
           var u = navigator.userAgent;
           var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
           if (isIOS) {
           if (screen.height == 812 && screen.width == 375){
           //是iphoneX
//进行更换适配图片操作
           }else{
           //不是iphoneX
           return;
           }
           }
           }

//检测设备是否是iphoneX
      isIPhoneX();

2.尽量让设计设计图的时候设计成图片下面是纯色的颜色，通过background:url(路径) #000 no-repeat left top;的方式让与图片相同的背景色去填充空白

3.通过以下代码拉伸图片进行竖向铺满，但是缺点是图片被拉长很难看

body{
               margin: 0;
               padding: 0;
               background: url(img/bg.jpg) no-repeat left top;
               background-size: cover;
   background-attachment: fixed;
           }

4.通过以下代码让放在元素中的img铺满整个屏幕

html：

<body>

</body>

css:

#imgWrap{
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
100%
}
#imgWrap img{
100%;
height:100%;
}
---------------------
作者：wly_syp
来源：CSDN
原文：https://blog.csdn.net/wly_syp/article/details/84553322
版权声明：本文为博主原创文章，转载请附上博文链接！ z转载