曾經(jīng)寫了一篇關(guān)于iPhoneX適配（h5）的文章，這篇文章主要從css方面介紹了iphoneX的適配寄猩，但是前段時間蘋果又推出了iphoneXS嫉晶、iphoneXSMax、iphoneXR這三種機型，依然有齊劉海和底部手勢區(qū)域的適配替废，此篇文章將介紹iphoneX 箍铭、iphoneXS、iphoneXSMax椎镣、iphoneXR這幾種機型的適配
基礎(chǔ)知識
1. 關(guān)于iphoneX 诈火、iphoneXS、iphoneXSMax状答、iphoneXR機型的大小和像素
機型尺寸
注意：開發(fā)人員只需要記住開發(fā)尺寸
2. 屏幕組成
齊劉海(44px) + 安全區(qū)域 + 手勢區(qū)域(34px)
屏幕組成
適配方案
1. viewport-fit
- viewport-fit="contain"展示區(qū)域在安全區(qū)中冷守，不包括齊劉海和底部手勢區(qū)域
- viewport-fit="cover"展示區(qū)域整個屏幕中，包括齊劉海和底部手勢區(qū)域
所以使用viewport-fit="contain"就可以解決適配問題惊科，將下面的代碼放在<head>標簽中拍摇。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
2. css媒體查詢
- X、XS機型的媒體查詢
/* x xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
// iphoneX iphoneXS樣式
}
- XR機型媒體查詢
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
// iphoneXR樣式
}
- XS MAX機型媒體查詢
/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
// iphoneXR樣式
}
3. js判斷
通過window.navigator.userAgent馆截、window.devicePixelRatio充活、window.screen三個屬性來匹配
- X、XS機型js檢查
let isIphoneX = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812)
- XR機型js檢查
let isIphoneXr = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896)
- XS MAX機型js檢查
let isIphoneXsMax = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896)
- iphoneX系列機型js檢查
// is iphone
function isIphone() {
return /iphone/gi.test(window.navigator.userAgent)
}
// 是否是iphone系機型
function isIphonXSeries() {
if (typeof window !== 'undefined' && window) {
return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
}
return false;
}
