移動端iphoneX的適配問題

I O發表於2018-05-04
iPhone

在專案開發中，遇到了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)
       } 複製程式碼

可以在其他函式中進行判斷使用：

移動端iphoneX的適配問題

如果需要進行其他css的特有設定的話，可以再HTML標籤中加入一個類，然後進行iPhone X的專有的樣式設定就好了。

$(function(){
    if(iphoneX()){
   $('html').addClass('iphoneX')
  }
})複製程式碼

只要針對iPhone X下的元素進行調整就可以了。



如果需要的話，在圖片上加入高度，最後就會預設佔滿全屏啦。


相關文章