iPhone X H5 適配通用方案
說明
iPhone X 適配理論上需要在 UI 預(yù)先適配的基礎(chǔ)上再做前端頁(yè)面的適配妄田，以保證 iPhone X 下的最佳體驗(yàn)。但因?yàn)轫?xiàng)目復(fù)雜厨剪，涉及改動(dòng)點(diǎn)較多伯顶，可暫時(shí)采用此方案。
局限性主要體現(xiàn)在fixed元素?zé)o法使用通用的樣式適配螃宙。且涉及到是否吸底测摔，吸底元素是否可以簡(jiǎn)單移動(dòng)位置還是需要增加元素高度又能保證中間內(nèi)容看起來(lái)“垂直居中”置济。
需要適配點(diǎn)
- 整體頁(yè)面顯示位置（內(nèi)容）
- fixed + bottom = 0
- fixed + bottom > 0
- absolute + bottom = 0
- 瀑布流列表加載中文案可能觸底 - 組件內(nèi)修改
- 沉浸（狀態(tài)）式H5頁(yè)面頭部高度 - 需個(gè)性化修改
通用解決方案
針對(duì)前面4個(gè)適配點(diǎn)，給出適配方案如下：
1.修改 meta 標(biāo)簽中锋八，加入viewport-fit=cover浙于，使在 iPhone X 下頁(yè)面全屏覆蓋，并且后面相應(yīng)的 hack 屬性能生效挟纱。
<meta name="viewport" content="...,viewport-fit=cover">
2.修改 body 內(nèi)邊距羞酗。在通用 CSS 中添加下面代碼。其中constant和env是 iOS 10+ 上才能識(shí)別的 CSS 方法紊服，safe-area-inset-bottom是底部的安全距離檀轨，一般是34px（防止 iPhone X Plus 之類的胸竞，還是用個(gè)統(tǒng)一的官方變量比較好）（注意：樣式需要放到最后，保證不會(huì)被覆蓋）
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
3.針對(duì)fixed定位的元素参萄，因?yàn)槠涫窍鄬?duì)于瀏覽器窗口進(jìn)行定位的卫枝，所以 body 的內(nèi)容區(qū)域無(wú)法限制其位置，需要調(diào)整其位置讹挎。采用以下通用 js 解決剃盾。(注意：需放置頁(yè)面最后淤袜，保證頁(yè)面元素已渲染到頁(yè)面，用戶能感知到頁(yè)面中 fixed 定位元素會(huì)在顯示后往上移一段衰伯，至于是否會(huì)遮擋到中間滾動(dòng)塊還待觀察铡羡，因此建議在項(xiàng)目允許的情況下，對(duì)fixed元素最好用 CSS 做個(gè)性化適配)
// 底部安全距離
const IPHONEX_BOTTOM_HEIGHT = 34;
// 可添加到通用UA判斷中
function isIphoneX(){
return /iphone/gi.test(window.navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
if(isIphoneX()){
$('*').filter(function(index, item){
return $(item).css('position') === 'fixed';
}).map(function(index, item){
var itemTop = $(item).position().top;
if(itemTop > IPHONEX_BOTTOM_HEIGHT){
$(item).css('top', itemTop - IPHONEX_BOTTOM_HEIGHT);
}
});
}
