在專案開發中,遇到了iPhone X的適配問題。由於本來就是image標籤為等比縮放的。一時有點摸不清頭腦。廢話不多說了。直接開始正文吧。
<img src="__STATIC__{:THEME_NAME}/Mar2018/citynight-images/ldbg.jpg?1" class="fade" style="position: fixed;bottom:0%;left:0%;width:100%;z-index:1">
<img src="__STATIC__{:THEME_NAME}/Mar2018/citynight-images/zip.png?2" class="zipPull fade" style="position: fixed;z-index:10;top:80%;left:0%;width:100%;">
複製程式碼
兩個image標籤。效果是下拉拉鍊的動畫效果。
第一步:首先設定網頁在可視視窗的佈局方式。
在meta標籤中加入viewport-fit=cover。
比如在我的專案中在後面直接新增了這個屬性。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,viewport-fit=cover"
/>複製程式碼
這邊做一下補充吧。
viewport-fit
- contain
- cover
- auto
只有開啟cover 配置,才開啟了 IPX 的全屏開關,預設會有保護區域的
第二步:封裝JS函式來進行iPhone X的判斷。
function iphoneX(){
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
} 複製程式碼
可以在其他函式中進行判斷使用:
如果需要進行其他css的特有設定的話,可以再HTML標籤中加入一個類,然後進行iPhone X的專有的樣式設定就好了。
$(function(){
if(iphoneX()){
$('html').addClass('iphoneX')
}
})複製程式碼
只要針對iPhone X下的元素進行調整就可以了。
如果需要的話,在圖片上加入高度,最後就會預設佔滿全屏啦。