H5頁面在iPhoneX劉海屏適配

時間 2020-06-09

標籤 h5 頁面 iphonex 劉海適配简体版

原文原文鏈接

前言

iPhone X和IOS 11的發佈，不只在許多技術方面形成了必定的衝擊，前端也不能夠避免地也受到影響，由於iPhone X劉海的影響，在編寫前端頁面的時候要作一些處理，下面先提出一些新的概念。css

iphone介紹

iPhone X 不管是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大的改變，下面以iPhone 8做爲參照物，看看到底iPhone X的適配咱們要怎麼考慮。html

咱們看看iPhone X尺寸上的變化：前端

概念

1、劉海屏

劉海屏也有其它叫法：凹凸屏、頭凹屏、覆蓋屏、挖孔屏等等，這裏統一按劉海屏命名，雖然都在吐槽IPhoneX的劉海屏，可是各大安卓廠商仍是不停的爭相模仿，使用起來也是挺不方便的，顏值上升，操做感降低，尤爲是單手握住屏幕的邊緣時會有極大的不便。web

蘋果IOS的還好，可是安卓的廠商有小米、華爲、oppo、vivo等都相應的出了本身的劉海屏，各大廠商也出了本身兼容劉海屏的方案，咱們在另一篇文章中會說起到安卓全家桶——各大廠商的劉海屏解決方案。瀏覽器

2、安全區域

由於劉海的關係，全部的展現都會放在一個叫作safe-area的區域，以下圖，主要是爲了防止顯示的內容被劉海傳感器(house sensor)，圓角邊框(rounded corners)所遮擋，這樣對用戶來講是不友好的，可是若是所有內容被放置在默認的安全區域，顯示的內容就會被壓縮，這個時候須要作一些處理，既然頁面可以正常顯示，又可以不被安全區域遮擋。安全

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

iPhoneX的適配------適配方案viewport-fit

1、CSS3新特性viewport-fit

PhoneX的適配，在iOS 11中採用了viewport-fit的meta標籤做爲適配方案ui

在w3c.org官方給出的關於圓形展現(Round display)的標準中，提到了viewport-fit這一屬性，這個屬性代表了對於某些屏幕並非矩形形狀的設備的時候瀏覽器該若是進行顯示。傳送門:viewport-fit官方參考文檔this

viewport-fit取值以下：spa

auto	默認
contain	頁面內容顯示在safe area內同auto
cover	頁面內容充滿屏幕

eg：<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">

2、CSS3新特性env()、constant()以及預約義變量safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom

在定義viewport-fix之後，瀏覽器會自動生成四個padding變量，即用來將頁面向內擠壓到能夠正常顯示的位置。這個時候須要用到env或者constant來將變量轉換成CSS屬性值而且賦值給屬性。ps:env好像還在開發中，好像只支持IOS 11.2及以上。目前比較穩妥的方法就是constant和env一塊兒使用。傳送門:var預約義變量官方參考文檔

注意

1）當咱們設置viewport-fit:contain,也就是默認的時候;設置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等參數時不起做用的

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  }

3、開始動手

一、在meta中添加viewport-fit=cover(告訴瀏覽器要講整個頁面渲染到瀏覽器中，無論設備是圓角與否，這個時候會形成頁面的元素被圓角遮擋)

二、爲了處理這些顯示的問題，咱們須要使用到env，constant還有預約義變量safe-area-inset-top,safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left。所有使用的這些方法或者變量都是在Safari中所有定義好的，咱們就正常使用就行。可是別忘記了還要作一個向下兼容。

 /* 導航欄由於是基於屏幕定位，因此padding要進行單獨的計算。env在IOS 11.2中新增的，constant在IOS 11.2 已經被廢棄，可是咱們要作兼容，因此都要用上。 */ header { position: fixed; top: 0; left: 0; width: 100%; display: block; box-sizing: border-box; /* 由於header導航欄是基於屏幕進行定位，因此要作單獨的padding擠壓處理 */ padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); overflow: scroll; background-color:#2889e8; } /* body 在橫屏底下和豎屏底下必定要作好定位，否則*/ /* 豎屏底下的查詢 */ @media screen and (orientation: portrait) { body { /* 防止頁面被劉海遮住 */ padding-top: constant(safe-area-inset-top); } } /* 橫屏底下的查詢 */ @media screen and (orientation: landscape) { body { /* IOS 11支持*/ padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); /*IOS 11.2版本版本支持*/ padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); } }

iPhoneX的適配------高度統計

iPhoneX的適配------媒體查詢

注意這裏採用的是690px(safe area高度)，不是812px;

@media only screen and (width: 375px) and (height: 690px){ body { background: blue; } }

iphoneX viewport-fit問題總結

1、iphoneX 頁面使用漸變色

設置viewport-fit:cover，若是設置單色會填充整個屏幕，若是設置漸變色那麼只會使用子元素的高度去渲染；並且頁面的高度只有690px高度，上面使用了padding-top:88px;

代碼

<body> <div class="content">this is subElement</div> </body> // 單色時 * { padding: 0; margin: 0; } body { background:green; padding-top: constant(safe-area-inset-top); //88px  /*padding-left: constant(safe-area-inset-left);*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ } // 漸變色 * { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f),to(#ffaa22)); padding-top: constant(safe-area-inset-top); //88px /*padding-left: constant(safe-area-inset-left);*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }

解決使用漸變色沒有填充整個屏幕

代碼

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> <title>Designing Websites for iPhone X: Respecting the safe areas</title> <style> * { padding: 0; margin: 0; } html, body { height: 100%; } body { padding-top: constant(safe-area-inset-top); padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); } .content { background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); width: 100%; height: 724px; } 

　　</style> </head> <body> <div class="content">this is subElement</div> </body> </html>

2、iphoneX頁面使用固定定位 {position:fixed;}

這裏可能有人會有疑問，爲何非通欄下的頁面內容是通到底部的，而按鈕倒是在安全區域上方呢？

這個問題涉及到安全區域，iOS11 和先前版本的不一樣之處在於，webview 比較重視安全區域了。這意味着，若是給頁面元素設置 top: 0, 它會渲染在屏幕頂部的44px之下，也就是狀態欄下面。若是給頁面元素設置 bottom: 0, 它會渲染在屏幕底部的34px之上，也就是底部安全區域上面。

狀況一：設置viewport-fit:contain/auto時，子元素固定在頁面底部，能夠看到bottom:0時只會顯示在安全區域內；

代碼

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1"> <!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">--> <title>Designing Websites for iPhone X: Respecting the safe areas</title> <style> * { padding: 0; margin: 0; } /*html,body {*/ /*height: 100%;*/ /*}*/ body { background: grey; /*padding-top: constant(safe-area-inset-top);*/ /*padding-left: constant(safe-area-inset-left);*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ } .top { width: 100%; height: 44px; background: purple; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; color: black; background: green; } </style> </head> <body> <div class="top">this is top</div> <div class="bottom">this is bottom</div> </body> </html>