web app 一分鐘適配 iPhone X

2021-09-11 14:14:56 字數 1155 閱讀 7739

明天就要開搶 iphone x 了,然而面對 iphone x 這個奇葩的螢幕,你準備好了嗎?

因為 iphone x 的劉海設計,web 在 iphone x 橫屏

時,可能會有些問題:

預設情況,iphone x 會將頁面填充到安全區域(safe area),就像上面的圖一樣,一般情況下是沒有問題的;

1. 預設全屏

"viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">  

複製**

在 viewport 的 meta 屬性中,新增viewport-fit=cover即可。

viewport-fit 預設值為auto/contain,全屏值為cover,是不是感覺很熟悉?嗯,和background-size以及object-fit一樣的。

2. 設定頁面邊距為安全區域邊距

body

複製**

嗯,constant()以及safe-area-inset-topsafe-area-inset-rightsafe-area-inset-bottomsafe-area-inset-left是 ios 11 webview 新增加的特性,專門用於應對劉海的。。。

當然,這裡的padding只是用於匹配iphone x預設的安全區域的,你可以設定任何值,不過建議要不小於預設的安全區域值。

當前版本,橫屏時,各屬性的值

safe-area-inset-top = 0  

safe-area-inset-right = 44px

safe-area-inset-bottom = 21px

safe-area-inset-left = 44px

複製**

豎屏時各值都是 0,但豎屏時需要特別留意 status-bar(44px) 和 home-indicator(34px)。

web app 一分鐘適配 iPhone X

明天就要開搶 iphone x 了,然而面對 iphone x 這個奇葩的螢幕,你準備好了嗎?因為 iphone x 的劉海設計,web 在 iphone x 橫屏 時,可能會有些問題 預設情況,iphone x 會將頁面填充到安全區域 safe area 就像上面的圖一樣,一般情況下是沒有問題的 ...

一分鐘sed入門(一分鐘系列)

1.簡介 sed是一種行編輯器,它一次處理一行內容。2.sed呼叫方式 sed options command file s sed options f scriptfile file s 第一種直接在命令列中執行,第二種把命令寫到了指令碼中,二者無本質區別。示例 1 列印hello.txt的內容 ...

一分鐘看懂mysql 一分鐘,看懂易貨

從20世紀80年代開始,易貨公司在美國加拿大 澳大利亞等國興起,成為這些國家減少現金用量 增加銷售 減少庫存 開發新客戶 開闢新市場 促進經濟發展的重要產業。也成為了企業消化庫存商品 剩餘生產能力 無形資產的有效方式和在遭遇資金瓶頸時的新選擇。2015年以來,中國線下易貨店開始了矇眼狂奔,在河南南陽...