小程序學習-iPhone X適配 -开发者知识库

小程序學習-iPhone X適配 -开发者知识库,第1张

一、  安全區域(safe area)

  與iPhone6/6s/7/8相比,iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大的改變,下面以iPhone 8作為參照物,先看看iPhone X尺寸上的變化:

小程序學習-iPhone X適配 -开发者知识库,111,第2张

  蘋果對於 iPhone X 的設計布局意見如下:

小程序學習-iPhone X適配 -开发者知识库,111,第3张

  核心內容應該處於 Safe area 確保不會被設備圓角(corners),傳感器外殼(sensor housing,齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們設計顯示的內容應該盡可能的在安全區域內;

二、h5頁面適配

1、viewport-fit的meta標簽作為適配方案;viewport-fit的默認值是auto。

viewport-fit取值如下:

  auto 默認:viewprot-fit:contain;頁面內容顯示在safe area內
  cover

viewport-fit:cover,頁面內容充滿屏幕

 

2、css constant()函數 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹.

當我們設置viewport-fit:contain,也就是默認的時候時;設置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等參數時不起作用的。當我們設置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
}

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复