明天就要開搶 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-top
safe-area-inset-right
safe-area-inset-bottom
safe-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年以來,中國線下易貨店開始了矇眼狂奔,在河南南陽...