前端iPhone X適配總結

LiuRhoRamen 發布于2019-08-01 18:42 / 2876人閱讀

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。

屏幕尺寸

垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。

安全區域

安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響

viewport-fit

通過對meta標簽viewport的擴展，可以調整頁面的展現區域。viewport-fit有三個可選值：

contain:使頁面展示在安全區域內。
cover： 使頁面占滿屏幕。
auto： 和 contain 選項表現一樣

iOS11 新增特性，Webkit 的一個 CSS 函數，用于設定安全區域與邊界的距離，有四個預定義的變量：

safe-area-inset-left：安全區域距離左邊邊界距離
safe-area-inset-right：安全區域距離右邊邊界距離
safe-area-inset-top：安全區域距離頂部邊界距離
safe-area-inset-bottom：安全區域距離底部邊界距離

env() 和 constant()

因為之前使用的constant已經被棄用，所以需要我們向后兼容：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

適配 1.設置網頁在可視窗口的布局方式使頁面完全覆蓋整個窗口

 
 只有設置了 viewport-fit=cover，才能使用 env()。

2. 頁面主體內容限定在安全區域內

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

3. fixed 元素的適配

如果元素是fixed定位且bottom=0，那么除了設置body的padding-bottom還不夠，還需要給它自身添加padding，因為它是相對于屏幕最底部定位的。

{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

或者通過計算函數 calc 覆蓋原來高度：

{
        height: calc(60px(假設值) + constant(safe-area-inset-bottom));
        height: calc(60px(假設值) + env(safe-area-inset-bottom));
   }

注意，這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。
如果元素是fixed定位且bottom不等于0，則只調整位置就可以了，增加margin-bottom或者改變bottom。

參考

網頁適配 iPhoneX，就是這么簡單

Designing Websites for iPhone X

Human Interface Guidelines

云服務器 GPU云服務器新特性總結選擇器總結許可email營銷總結適配問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52027.html

前端iPhone X適配總結

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。安全區域安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）...

Zoom 2019-08-30 14:10 評論0 收藏0
前端iPhone X適配總結

摘要：頁面主體內容限定在安全區域內元素的適配如果元素是定位且，那么除了設置的還不夠，還需要給它自身添加，因為它是相對于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的顯示寬度與iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一樣，但是比4.7英寸的顯示屏高145pt。安全區域安全區域指的是一個可視窗口范圍，處于安全區域的內容不受圓角（corners）...

JackJiang 2019-08-22 15:32 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
前端開發中像素的概念

摘要：前端開發中像素的概念最近在公司實習第一次正式接觸到設計師的設計稿我相信很多剛涉及移動端設計與開發的同學基本上會在前端開發中的像素問題上糾結很久，所以寫下這篇筆記，便于自己日后翻閱。前端開發中像素的概念最近在公司實習,第一次正式接觸到設計師的設計稿.我相信很多剛涉及移動端設計與開發的同學基本上會在前端開發中的像素問題上糾結很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯誤...

darcrand 2019-08-29 12:24 評論0 收藏0