基礎知識
1. 關於iphoneX 、iphoneXS、iphoneXSMax、iphoneXR機型的大小和像素
機型尺寸
注意：開發人員只需要記住開發尺寸
2. 屏幕組成
齊劉海(44px) + 安全區域 + 手勢區域(34px)
屏幕組成
適配方案 1. viewport-fit viewport-fit="contain"展示區域在安全區中，不包括齊劉海和底部手勢區域 viewport-fit="cover"展示區域整個屏幕中，包括齊劉海和底部手勢區域 所以使用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)