背景
在專案中,需要針對iphone的劉海螢幕進行單獨的適配,這就需要看如何檢測劉海螢幕了。而且,同一款機型,得出來的螢幕解析度還有可能不同,下面把處理劉海屏中踩過的坑進行總結。
檢測iphone劉海屏
某些情況下,我們在樣式方面需要對iphone的劉海屏機型需要做特殊的處理。目前有三款劉海屏iphone,分別是iphoneX
、iphoneXR
、iphoneXS max
三種。其中三者的解析度和畫素比是不同的,而且iphoneXR
和iphoneXS max
兩款手機還可以選擇放大
的顯示模式,因此理論上有兩種不同的解析度。關於顯示模式的介紹可以看下面的內容。
具體的解析度情況如下:
裝置 | 畫素比(dpr) | 螢幕解析度 | 放大模式 |
---|---|---|---|
iphoneX | 3 | 1125*2436 | 無 |
iphoneXs max | 3 | 1242*2688 | 1125*2436 |
iphoneXr | 2 | 828 *1792 | 750*1624 |
判斷邏輯
綜上特點,因此需要根據ua中的資訊,判斷當前手機的平臺,以及根據當前獲取到的解析度,推斷當前是否為劉海機型。直接貼程式碼:
// 獲得手機平臺
OS: (function() {
const userAgent = navigator.userAgent;
if (/\bAndroid\b/i.test(userAgent)) {
return 'Android';
} else if (
/\bip[honead]+\b/i.test(userAgent) ||
/\biOS\b/i.test(userAgent)
) {
return 'IOS';
}
return null;
}()),
// 判斷機型
let ratio = window.devicePixelRatio || 1;
let screen = {
width: window.screen.width * ratio,
height: window.screen.height * ratio
};
const isX = screen.width === 1125 && screen.height === 2436;
const isXSMAX = screen.width === 1242 && screen.height === 2688;
const isXR = (screen.width === 750 && screen.height === 1624 || screen.width === 828 && screen.height === 1792);
// 那麼判斷是否是劉海屏
const isIOS = this.OS === 'IOS';
return isIOS && (isX || isXSMAX || isXR);
複製程式碼
為什麼放大模式需要單獨適配
iphone的放大模式原理是使用較低以及的邏輯解析度渲染,然後拉伸顯示到螢幕上。
例如新機推出時,如果有新的解析度時,有一種比較簡單的適配就是適配之前相同比例下面的小屏,例如plus機型適配到同數字的機型,max機型適配到X機型等等。
iPhone的16:9的螢幕的邏輯解析度,一共有三種:320×480,375×667,414×736,分別對應4'',4.7'',5.5''的螢幕。 對於4.7''和5.5''的螢幕來說,更低一級的邏輯解析度分別是320×480和375×667。同時,只要App適配這兩個解析度(當然是適配的),那麼不需要做任何修改,就可以直接執行。好了,為什麼iPhone X沒有放大模式呢?因為iPhone X沒有現成的更低一級的邏輯解析度,如果強行加上,那麼幾乎全部App都要針對一個新的、只有在iPhone X的放大模式下才會出現的邏輯解析度進行適配,這個成本實在是太大了。當然,iPhone XS Max上是有放大模式的,因為iPhone X的邏輯解析度,就是iPhone XS Max放大模式下的邏輯解析度,同樣不需要針對性適配。