Html5如何實(shí)現(xiàn)頁(yè)面適配iPhoneX

這篇文章主要介紹了Html5如何實(shí)現(xiàn)頁(yè)面適配iPhoneX，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前后效果圖：

幾個(gè)新概念

安全區(qū)域

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

viewport-fit

iOS11 新增特性，蘋果公司為了適配 iPhoneX 對(duì)現(xiàn)有 viewport meta 標(biāo)簽的一個(gè)擴(kuò)展，用于設(shè)置網(wǎng)頁(yè)在可視窗口的布局方式，可設(shè)置 三個(gè)值 ：

constant 函數(shù)

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

safe-area-inset-left
safe-area-inset-right
safe-area-inset-top
safe-area-inset-bottom

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

• 官方文檔中提到將來(lái) env() 要替換 constant () ，目前還不可用

• 這兩個(gè)函數(shù)都是 webkit 中 css 函數(shù)，可以直接使用變量函數(shù)，只有在 webkit 內(nèi)核下才支持

• constant ：針對(duì)iOS < 11.2以下系統(tǒng)

• env ：針對(duì)于iOS >= 11.2的系統(tǒng)

注意：網(wǎng)頁(yè)默認(rèn)不添加擴(kuò)展的表現(xiàn)是 viewport-fit=contain ，需要適配 iPhone 必須設(shè)置 viewport-fit=cover ，這是適配的關(guān)鍵步驟。

適配例子

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

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

第二步：頁(yè)面主體內(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(原來(lái)的bottom值) + constant(safe-area-inset-bottom));
}

吸底的情況（bottom=0）

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

/* 方法2 ：在元素下面用一個(gè)空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

因?yàn)橹挥杏旋R劉海和底部黑條的機(jī)型才需要適配樣式，可以用@support配合使用：

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

完整檢測(cè)代碼

@supports隔離兼容模式

因?yàn)橹挥杏旋R劉海和底部黑條的機(jī)型才需要適配樣式，可以用@support配合使用：

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏?xí)r為0
  padding-left: env(safe-area-inset-left); //如果未豎屏?xí)r為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏?xí)r為0
  padding-right: env(safe-area-inset-right); //如果未豎屏?xí)r為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); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
  padding-top: env(safe-area-inset-top); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未豎屏?xí)r為0
  padding-left: env(safe-area-inset-left); //如果未豎屏?xí)r為0
  padding-right: constant(safe-area-inset-right); //如果未豎屏?xí)r為0
  padding-right: env(safe-area-inset-right); //如果未豎屏?xí)r為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;
    }
  }
}

注意項(xiàng)

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Html5如何實(shí)現(xiàn)頁(yè)面適配iPhoneX”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!