背景

在項目中，需要針對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放大模式下的邏輯分辨率，同樣不需要針對性適配。

總結

以上是生活随笔為你收集整理的iPhone放大模式详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。