主頁 > 知識庫 > H5頁面適配iPhoneX(就是那么簡單)

H5頁面適配iPhoneX(就是那么簡單)

熱門標簽:ok電銷機器人 惡搞電話機器人 高德地圖標注商戶怎么標 如何查看地圖標注 黃石ai電銷機器人呼叫中心 欣鼎電銷機器人 效果 智能電銷機器人被禁用了么 電話機器人技術 地圖標注軟件打印出來

iPhoneX 取消了物理按鍵,改成底部小黑條,這一改動導致網(wǎng)頁出現(xiàn)了比較尷尬的屏幕適配問題。對于網(wǎng)頁而言,頂部(劉海部位)的適配問題瀏覽器已經(jīng)做了處理,所以我們只需要關注底部與小黑條的適配問題即可(即常見的吸底導航、返回頂部等各種相對底部 fixed 定位的元素)。

筆者通過查閱了一些官方文檔,以及結合實際項目中的一些處理經(jīng)驗,整理了一套簡單的適配方案分享給大家,希望對大家有所幫助,以下是處理前后效果圖:

大家都知道,iphoneX,屏幕頂部都有一個齊劉海,iPhoneX 取消了物理按鍵,改成底部小黑條,如果不做適配,這些地方就會被遮擋,因此本文講述下齊劉海與底部小黑條的適配方法。

幾個新概念

安全區(qū)域

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

 

viewport-fit

iOS11 新增特性,蘋果公司為了適配 iPhoneX 對現(xiàn)有 viewport meta 標簽的一個擴展,用于設置網(wǎng)頁在可視窗口的布局方式,可設置 三個值

描述
auto 默認值,跟 contain 表現(xiàn)一致。頁面內(nèi)容顯示在safe area內(nèi)。viewprot-fit:auto等同于viewport-fit:contain
contain 可視窗口完全包含網(wǎng)頁內(nèi)容(左圖)。頁面內(nèi)容顯示在safe area內(nèi)。viewport-fit:contain
cover 網(wǎng)頁內(nèi)容完全覆蓋可視窗口(右圖)。頁面內(nèi)容充滿屏幕。viewport-fit:cover

constant 函數(shù)

iOS11 新增特性,Webkit 的一個 CSS 函數(shù),用于設定安全區(qū)域與邊界的距離,有四個預定義的變量(單位是px):

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

注意:網(wǎng)頁默認不添加擴展的表現(xiàn)是 viewport-fit=contain,需要適配 iPhoneX 必須設置viewport-fit=cover,不然 constant 函數(shù)是不起作用的,這是適配的必要條件。

  • 官方文檔中提到將來 env() 要替換 constant () ,目前還不可用
  • 這兩個函數(shù)都是 webkit 中 css 函數(shù),可以直接使用變量函數(shù),只有在 webkit 內(nèi)核下才支持 constant
  • 針對iOS < 11.2以下系統(tǒng)
  • env :針對于iOS >= 11.2的系統(tǒng)

注意:網(wǎng)頁默認不添加擴展的表現(xiàn)是 viewport-fit=contain ,需要適配 iPhone 必須設置 viewport-fit=cover ,這是適配的關鍵步驟。

適配例子

第一步:設置網(wǎng)頁在可視窗口的布局方式

<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />

第二步:頁面主體內(nèi)容限定在安全區(qū)域內(nèi)

body {
  /* 適配齊劉海*/
  padding-top: constant(safe-area-inset-top);  
 /* 適配底部黑條*/
  padding-bottom: constant(safe-area-inset-bottom);
}

第三步:fixed 元素的適配

bottom 不是0的情況

/* bottom 不是0的情況 */
.fixed {
  bottom: calc(50px(原來的bottom值) + constant(safe-area-inset-bottom));
}

吸底的情況(bottom=0)

/* 方法1 :設置內(nèi)邊距 擴展高度*/
/* 這個方案需要吸底條必須是有背景色的,因為擴展的部分背景是跟隨外容器的,否則出現(xiàn)鏤空情況。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接擴展高度*/
.fix {
  height: calc(60px(原來的高度值) + constant(safe-area-inset-bottom));
}

/* 方法2 :在元素下面用一個空div填充, 但是背景色要一致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素樣式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}

最后: 使用@supports

因為只有有齊劉海和底部黑條的機型才需要適配樣式,可以用@support配合使用:

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

完整檢測代碼

@supports隔離兼容模式

因為只有有齊劉海和底部黑條的機型才需要適配樣式,可以用@support配合使用:

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //為導航欄+狀態(tài)欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導航欄+狀態(tài)欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
  padding-left: env(safe-area-inset-left); //如果未豎屏時為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
  padding-right: env(safe-area-inset-right); //如果未豎屏時為0
  padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

@media 媒體查詢

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //為導航欄+狀態(tài)欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導航欄+狀態(tài)欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
  padding-left: env(safe-area-inset-left); //如果未豎屏時為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
  padding-right: env(safe-area-inset-right); //如果未豎屏時為0
  padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}

/* iphonex 適配 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

補充

注意項

env 和 constant 只有在 viewport-fit=cover 時候才能生效, 上面使用的safari 的控制臺可以檢測模擬器中網(wǎng)頁開啟web inspector.

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

標簽:赤峰 萍鄉(xiāng) 中山 盤錦 聊城 金昌 綏化 阿壩

巨人網(wǎng)絡通訊聲明:本文標題《H5頁面適配iPhoneX(就是那么簡單)》,本文關鍵詞  頁面,適配,iPhoneX,就是,那么,;如發(fā)現(xiàn)本文內(nèi)容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《H5頁面適配iPhoneX(就是那么簡單)》相關的同類信息!
  • 本頁收集關于H5頁面適配iPhoneX(就是那么簡單)的相關信息資訊供網(wǎng)民參考!
  • 推薦文章