成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

LiuRhoRamen / 2882人閱讀

摘要：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)元素的適配如果元素是定位且，那么除了設(shè)置的還不夠，還需要給它自身添加，因?yàn)樗窍鄬τ谄聊蛔畹撞慷ㄎ坏摹?/p>

屏幕尺寸

垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。

安全區(qū)域

安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響

viewport-fit

通過對meta標(biāo)簽viewport的擴(kuò)展，可以調(diào)整頁面的展現(xiàn)區(qū)域。viewport-fit有三個(gè)可選值：

contain:使頁面展示在安全區(qū)域內(nèi)。
cover： 使頁面占滿屏幕。
auto： 和 contain 選項(xiàng)表現(xiàn)一樣

iOS11 新增特性，Webkit 的一個(gè) CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有四個(gè)預(yù)定義的變量：

safe-area-inset-left：安全區(qū)域距離左邊邊界距離
safe-area-inset-right：安全區(qū)域距離右邊邊界距離
safe-area-inset-top：安全區(qū)域距離頂部邊界距離
safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
env() 和 constant()

因?yàn)橹笆褂玫腸onstant已經(jīng)被棄用，所以需要我們向后兼容：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
適配 1.設(shè)置網(wǎng)頁在可視窗口的布局方式使頁面完全覆蓋整個(gè)窗口 
 
 只有設(shè)置了 viewport-fit=cover，才能使用 env()。
2. 頁面主體內(nèi)容限定在安全區(qū)域內(nèi) 
body {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
3. fixed 元素的適配

如果元素是fixed定位且bottom=0，那么除了設(shè)置body的padding-bottom還不夠，還需要給它自身添加padding，因?yàn)樗窍鄬τ谄聊蛔畹撞慷ㄎ坏摹?/p> 

{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

或者通過計(jì)算函數(shù) calc 覆蓋原來高度：

{
        height: calc(60px(假設(shè)值) + constant(safe-area-inset-bottom));
        height: calc(60px(假設(shè)值) + env(safe-area-inset-bottom));
   }

注意，這個(gè)方案需要吸底條必須是有背景色的，因?yàn)閿U(kuò)展的部分背景是跟隨外容器的，否則出現(xiàn)鏤空情況。
如果元素是fixed定位且bottom不等于0，則只調(diào)整位置就可以了，增加margin-bottom或者改變bottom。

參考

網(wǎng)頁適配 iPhoneX，就是這么簡單

Designing Websites for iPhone X

Human Interface Guidelines

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52027.html

相關(guān)文章

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

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

    Zoom 評論0 收藏0

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

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

    JackJiang 評論0 收藏0

  • 移動端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...

    Clect 評論0 收藏0

  • 前端開發(fā)中像素的概念

    摘要：前端開發(fā)中像素的概念最近在公司實(shí)習(xí)第一次正式接觸到設(shè)計(jì)師的設(shè)計(jì)稿我相信很多剛涉及移動端設(shè)計(jì)與開發(fā)的同學(xué)基本上會在前端開發(fā)中的像素問題上糾結(jié)很久，所以寫下這篇筆記，便于自己日后翻閱。 前端開發(fā)中像素的概念 最近在公司實(shí)習(xí),第一次正式接觸到設(shè)計(jì)師的設(shè)計(jì)稿.我相信很多剛涉及移動端設(shè)計(jì)與開發(fā)的同學(xué)基本上會在前端開發(fā)中的像素問題上糾結(jié)很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯(cuò)誤...

    darcrand 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<