關于iPhoneX適配(h5)

1. 基礎設備信息

  • 首先在了解iPhoneX適配之前,需要了解關于iPhone設備的一些基礎
    1) 關于iPhone的一些基礎參數


    設備信息.png

    2) iPhoneX設備信息

    • iPhoneX屏幕組成:上部齊劉海sensor housing(44pt) + 安全區域safe area + 底部手勢區域Home Indicator(34pt)
    • safe area(安全區域)


      safeArea.png
    • 安全區域以外的是上部“齊劉海” 和 下部“手勢區域”,一般情況下,我們都會在安全區域(safe area)中進行頁面的編寫;

2. iPhoneX適配

1)適配方案viewport-fit、css constant()、媒體查詢

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  • viewport-fit有兩個值,containcover
    默認是contain,頁面內容顯示在safe area中(不包括上部的齊劉海和下部的手勢區域)
    cover值:頁面內容充滿屏幕
  • css constant()
    有四個值:safe-area-inset-top , safe-area-inset-left , safe-area-inset-right , safe-area-inset-bottom
    1)當viewport-fit:contain,上面這個四個值無效
    2)當viewport-fit:cover,這四個值需要設置,頁面才會顯示在安全區域中,設置如下:
body {
    padding-top: constant(safe-area-inset-top);   //為導航欄+狀態欄的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未豎屏時為0                
    padding-right: constant(safe-area-inset-right); //如果未豎屏時為0                
    padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px       
}
  • 媒體查詢
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
  // iphoneX css部分
}

3. 總結

  • 一般情況下iPhoneX適配方法有三種
  1. viewport-fit:contain
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
  1. viewpoer-fit: cover + css canstant()
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
body {
    padding-top: constant(safe-area-inset-top);   //為導航欄+狀態欄的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未豎屏時為0                
    padding-right: constant(safe-area-inset-right); //如果未豎屏時為0                
    padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px       
}
  1. css的媒體查詢
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
  // iphoneX css部分
}
關于iphoneX、iphoneXS、iphoneXSMax、iphoneXR適配

iphoneX、iphoneXS、iphoneXSMax、iphoneXR適配

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ? IphoneX 的適配,關鍵在于怎么讓頁面適應 “齊劉海”、底部操作區域以及大圓角問題。 ? IphoneX ...
    果汁涼茶丶閱讀 6,749評論 0 7
  • 在前段時間上了熱搜的iPhone-x 想必大家就算不知道,都對這個有些許的了解,不知道有都多少基友買了iPhone...
    蕭玄辭閱讀 2,290評論 0 1
  • 網頁適配 iPhoneX,就是這么簡單 (轉載)2017-11-28 NONO JavaScript 前言 iPh...
    安石0閱讀 852評論 0 0
  • 北京時間 9 月 12 日凌晨,蘋果在喬布斯劇院發布了 iPhone X。iPhone X 正面的全面屏上方有一條...
    鄧映山閱讀 1,585評論 0 1
  • 一、 安全區域(safe area) 與iPhone6/6s/7/8相比,iPhone X 無論是在屏幕尺寸、分辨...
    衡胖子哇閱讀 11,586評論 0 3