iphoneX設(shè)計網(wǎng)站適配

時間：2023-09-06 04:18:01 | 來源：網(wǎng)站運營

時間：2023-09-06 04:18:01 來源：網(wǎng)站運營

iphoneX設(shè)計網(wǎng)站適配：

為iphoneX設(shè)計網(wǎng)站適配

幾乎所有的前端開發(fā)者都會接觸到為iphoneX設(shè)計H5網(wǎng)頁，其中就得為其特有的安全區(qū)域做出適配，以便優(yōu)化用戶體驗。

安全區(qū)域

布局參考線定義了矩形區(qū)域，這些區(qū)域?qū)嶋H上不會出現(xiàn)在屏幕上，但有助于內(nèi)容的定位、對齊和間距。這塊區(qū)域就是安全區(qū)域，安全區(qū)域還可以防止內(nèi)容在狀態(tài)欄、導(dǎo)航欄、工具欄和選項卡欄的下方重疊，如下圖藍(lán)色區(qū)域：

Safari 原生網(wǎng)頁

Safari在新款iPhone X已經(jīng)很好地適配了安全區(qū)域，你的H5網(wǎng)頁在Safari打開是會在安全區(qū)域內(nèi)的。如果你想要在Safari之外的瀏覽器打開你的H5網(wǎng)頁，就得重新考慮一下安全區(qū)域的適配了。

如何設(shè)計

viweport-fit:cover

viewport fit的默認(rèn)值是auto，這將導(dǎo)致自動插入行為。為了禁用該行為并使頁面布局為屏幕的最大尺寸，可以將viewport fit設(shè)置為cover

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

限制到安全區(qū)域

在設(shè)置了viewport fit之后，就需要將內(nèi)容限定在安全區(qū)域之內(nèi)。ios 11 Webkit提出了env()函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，包括四個預(yù)定義的變量： + safe-area-inset-left：安全區(qū)域距離左邊邊界距離 + safe-area-inset-right：安全區(qū)域距離右邊邊界距離 + safe-area-inset-top：安全區(qū)域距離頂部邊界距離 + safe-area-inset-bottom：安全區(qū)域距離底部邊界距離

注意：當(dāng) viewport-fit=contain 時 env() 是不起作用的，必須要配合 viewport-fit=cover 使用。對于不支持env() 的瀏覽器，瀏覽器將會忽略它。

尤其注意很多小伙伴可能會想過使用constant()函數(shù)，在官方文檔中指出：

因此 constant() 在 iOS11.2之后就不能再使用了，這方面還需要做一下兼容：

.post { padding: 12px; padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */}

min()、max()、calc()

實際開發(fā)中，可沒這么簡單。設(shè)備橫屏豎屏的狀態(tài)都會導(dǎo)致safe-area-inset-bottom的對象不一致，這時候設(shè)置的值就會有問題。你就可以考慮使用數(shù)學(xué)計算了。。。

.post { padding-bottom: max(12px, env(safe-area-inset-bottom));}在上面例子中：當(dāng)設(shè)備豎屏是，擁有safe-area-inset-bottom，這時候基本上會大于12px，因此取值safe-area-inset-bottom；當(dāng)橫屏?xí)r，safe-area-inset-bottom為0，這時候會取默認(rèn)12px，以致于橫屏?xí)r頁面底部不會太貼邊。

你也可以使用calc()計算，不管safe-area-inset-bottom有沒有，都設(shè)置12px的默認(rèn)值。如下：

.post { padding-bottom: calc(12px(默認(rèn)值) + env(safe-area-inset-bottom));}

@supports

如果你只是希望這種適配只針對iphoneX設(shè)備，那么你可以使用 @supports來對適配樣式進(jìn)行隔離。

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {.post {padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}}

寫在最后

以上幾種方案僅供參考，有興趣對iphone設(shè)備兼容的可以移步官方文檔（底部參考鏈接）進(jìn)行研究。

參考

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

https://webkit.org/blog/7929/designing-websites-for-iphone-x/