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

本文链接：https://blog.csdn.net/weixin_44384778/article/details/94619354

本文介绍四种针对iPhoneX设备的适配方法，包括设计单独尺寸的图片、使用纯色背景填充、拉伸图片及调整img元素以铺满屏幕的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前有四种方法

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：

<div id="imgWrap">
        [外链图片转存失败(img-mtj4IXIl-1562223678095)(https://mp.csdn.net/h5New/img/1.jpg)]
</div>

css:

#imgWrap{                
     z-index: 1;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%
}    
#imgWrap img{
     width:100%;
     height:100%;
}