相容iPhone X的「劉海」設計

2022-07-26 02:30:15 字數 562 閱讀 6459

1、在元素中指定與頁面的background-color一樣的顏色用來填充整個頁面。這樣頁面的安全區域和其餘部分混合在一起。這種方法對於只有**資訊的簡單頁面已經足夠。

但是對於一些有全屏導航或全屏自適應布局的頁面,這樣設定並不夠。需要2、3方法。

2、第乙個新特性是對現有viewport meta標籤的擴充套件,稱為viewport-fit,它提供對嵌入(insetting)行為的控制。在ios 11中可以使用viewport-fit

viewport-fit的預設值是auto,上面看到的的效果就預設的嵌入行為。為了使該行為失效,並導致頁面顯示到螢幕的大小,你可以設定viewport-fit:cover來覆蓋。

3、設定安全區域(使用max(),當手機橫屏豎屏時都能正常設定安全區域。這個特性在ios 11不能使用)

@supports(padding: max(0px))

相容iphone x劉海的正確姿勢

在 ios 11 中我們可以使用viewport fit cover safe area inset 那麼是不是 ios11 以下就用不了這些了呢?是的,但你見過 iphone x 有 ios 11以下的嗎?所以我們可以愉快的搞下去。開始之前我們先了解什麼是 safe area,簡單的來說就是除了劉...

使用 css 適配 iphoneX 劉海屏

iphonex 劉海螢幕導致 h5 頁面不能正常的全屏顯示了,就需要對 頁面進行適配,下面就詳細說說如何適配。首先上一張適配之前的圖 可以看到頁面頂部被遮擋,底部貼著最下面 ios11 增加新特性,增加webkit 的 css 函式,css 預定義變數 四個預定義變數為設定安全區域和邊界的距離,如下...

iPhone X 的「劉海」正是蘋果的品牌象徵

以下內容由mockplus團隊翻譯整理,僅供學習交流,mockplus是更快更簡單的原型設計工具。在iphone x發布活動結束之後,關於其在螢幕頂端獨特的 劉海 設計,引起了不少人的討論。其實,這個 劉海 是為了將啟用face id的相機和感測器隱藏起來。但仍有許多人,特別是設計師紛紛表示這個 劉...