iponeX適配問題

安全區域指的是乙個可視視窗範圍，處於安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（home indicator）影響，如下圖藍色區域：

網頁預設不新增擴充套件的表現是 viewport-fit=contain，需要適配 iphonex 必須設定

viewport-fit=cover，這是適配的關鍵步驟。

// 64 為 ios header 的高度 .ac-container

通過 window.getcomputedstyle 還可以間接的獲取到以下資訊

ios11 iphonex constant(safe-area-inset-bottom) = 34px

ios11 其他機型 constant(safe-area-inset-bottom) = 0px

ios11 及以下版本和安卓不識別 constant(safe-area-inset-bottom)

// 如果預設值不為 0，需要加上預設值 .ac-container // 10px 為底部距離小黑條距離，如果想在 iphone x 上更靠上一點，可以將 10 增大 // 如44，剛好就在小黑條上面

env() 方法是在 ios11 中被支援的，一開始他被命名為 constant()。在 safari technology preview 41 and the ios 11.2 beta的版本中支援，constant() 已經被重新命名為 env()。我們可以使用 css 的 fallback 機制來適配所有的版本，如果有必要的話，我們可以提前使用 env() 來適配。

當使用了安全區域變數，並不能解決所有的問題。比如，上面的頁面，當橫屏的時候， env(safe-area-inset-left) 是有值的，當豎屏的時候，env(safe-area-inset-left)=0px，此時，文字就會擠到螢幕的邊緣了。

為了解決這個問題，其實是需要給 padding 設定乙個預設值，當 safe-area-inset-left 有值的時候，設定成 safe-area-inset-left，沒值的時候使用預設值。我們可以使用一組新的 css 函式 min() and max() 來解決這個問題。這2個函式可以接受任意個數的引數，並返回最大或者最小的那個。他們也可以用到 calc() 中，也可以相互巢狀使用。

@supports(padding: max(0px)) 
}

注意⚠️：@supports 語句可以檢查是否支援 max，但不要在其中使用變數，例如：@supports(padding:

max(env(safe-area-inset-left)))，因為 css對待無效的變數是返回預設值，也就是這個例子中的padding的初始值。css-variables

在上述的示例中，當豎屏時，env(safe-area-inset-left) 是 0，所以 max 函式返回了 12px。當橫屏時，env(safe-area-inset-left) 的值會大於 12，所以，max函式會返回 env(safe-area-inset-left) 的值。這就保證了頁面的動態適應性。

iponeX適配問題

Android values適配問題

C DPI適配問題

螢幕適配問題

iponeX適配問題

Android values適配問題

C DPI適配問題

螢幕適配問題

相關推薦