国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

適配iphone X

xialong / 654人閱讀

摘要：首先需要為標(biāo)簽加上，默認(rèn)，跟類似。當(dāng)值設(shè)置為既可讓安全區(qū)域鋪滿全屏，就跟適配其他設(shè)備沒什么區(qū)別了。但是內(nèi)容會(huì)被頂部和底部的硬件遮擋，如果不想被遮擋，就需要頭部底部預(yù)留一定高度。

首先需要為meta標(biāo)簽加上viewport-fit=cover，默認(rèn)viewport-fit=contain，跟background-size類似。
當(dāng)值設(shè)置為cover既可讓安全區(qū)域鋪滿全屏，就跟適配其他設(shè)備沒什么區(qū)別了。
但是內(nèi)容會(huì)被頂部和底部的硬件遮擋，如果不想被遮擋，就需要頭部底部預(yù)留一定高度。
所以就需為body加上padding，官方提供了四個(gè)值，可以直接獲取到頭部底部以及橫屏?xí)r候的左側(cè)右側(cè)值，我們只需要在自己的容器設(shè)置上著四個(gè)值即可：
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設(shè)置constant()是無效的

豎屏?xí)r候左側(cè)右側(cè)值為0，橫屏?xí)r候左側(cè)右側(cè)才有值

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);
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51620.html

相關(guān)文章

  • 前端iPhone X適配總結(jié)

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

    Zoom 評(píng)論0 收藏0

  • 前端iPhone X適配總結(jié)

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

    JackJiang 評(píng)論0 收藏0

  • 前端iPhone X適配總結(jié)

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

    LiuRhoRamen 評(píng)論0 收藏0

  • iPhone X 媒體查詢適配

    摘要：適合一英寸的像素總數(shù)稱為屏幕密度或像素密度，其測(cè)量為每英寸像素?cái)?shù)。設(shè)備大多具有或顯示屏，因此您可以使用一般的視網(wǎng)膜媒體查詢?cè)谒蓄愋偷脑O(shè)備上顯示高分辨率內(nèi)容。 iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素 屏幕尺寸 Apple iPhone X的屏幕為5.8英寸，約為實(shí)際...

    cuieney 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<