[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配
生活随笔
收集整理的這篇文章主要介紹了
[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基礎知識
1. 關于iphoneX 、iphoneXS、iphoneXSMax、iphoneXR機型的大小和像素
注意：開發人員只需要記住開發尺寸
?
2. 屏幕組成
齊劉海(44px) + 安全區域 + 手勢區域(34px)
?
適配方案 1. viewport-fitviewport-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)?
?轉載于:https://www.cnblogs.com/chris-oil/p/10753861.html
總結
以上是生活随笔為你收集整理的[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 张良的大招净化可以解吗
- 下一篇： 浅入浅出Typescript Decor