目前有四种方法
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>
<div id="imgWrap">
<img src="../../h5New/img/1.jpg" />
</div>
</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转载