適配iphone X

Kerr1Gan 發布于2019-08-29 14:05 / 2190人閱讀

摘要：首先需要為標簽加上，默認，跟類似。當值設置為既可讓安全區域鋪滿全屏，就跟適配其他設備沒什么區別了。但是內容會被頂部和底部的硬件遮擋，如果不想被遮擋，就需要頭部底部預留一定高度。

首先需要為meta標簽加上viewport-fit=cover，默認viewport-fit=contain，跟background-size類似。
當值設置為cover既可讓安全區域鋪滿全屏，就跟適配其他設備沒什么區別了。
但是內容會被頂部和底部的硬件遮擋，如果不想被遮擋，就需要頭部底部預留一定高度。
所以就需為body加上padding，官方提供了四個值，可以直接獲取到頭部底部以及橫屏時候的左側右側值，我們只需要在自己的容器設置上著四個值即可：
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

需要注意的是，viewport-fit值不為cover設置constant()是無效的

豎屏時候左側右側值為0，橫屏時候左側右側才有值

code meta

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}

云服務器 GPU云服務器適配問題機型適配屏幕適配適配座

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112915.html

前端iPhone X適配總結

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。安全區域安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）...

Zoom 2019-08-30 14:10 評論0 收藏0
前端iPhone X適配總結

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。安全區域安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）...

JackJiang 2019-08-22 15:32 評論0 收藏0
前端iPhone X適配總結

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。安全區域安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）...

LiuRhoRamen 2019-08-01 18:42 評論0 收藏0
iPhone X 媒體查詢適配

摘要：適合一英寸的像素總數稱為屏幕密度或像素密度，其測量為每英寸像素數。設備大多具有或顯示屏，因此您可以使用一般的視網膜媒體查詢在所有類型的設備上顯示高分辨率內容。 iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素屏幕尺寸 Apple iPhone X的屏幕為5.8英寸，約為實際...

cuieney 2019-08-29 17:25 評論0 收藏0