目前有四種方法
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%;
width: 100%
}
#imgWrap img{
width:100%;
height:100%;
}
---------------------
作者：wly_syp
來源：CSDN
原文：https://blog.csdn.net/wly_syp/article/details/84553322
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！ z轉載