<strike id="owuiu"></strike>

<ul id="owuiu"></ul>

前端iPhone X適配總結

JackJiang 發(fā)布于2019-08-22 15:32 / 2891人閱讀

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

屏幕尺寸

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

安全區(qū)域

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

viewport-fit

通過對meta標簽viewport的擴展，可以調(diào)整頁面的展現(xiàn)區(qū)域。viewport-fit有三個可選值：

contain:使頁面展示在安全區(qū)域內(nèi)。
cover： 使頁面占滿屏幕。
auto： 和 contain 選項表現(xiàn)一樣

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

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

env() 和 constant()

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

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

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

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

2. 頁面主體內(nèi)容限定在安全區(qū)域內(nèi)

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);
   }

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

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

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

參考

網(wǎng)頁適配 iPhoneX，就是這么簡單

Designing Websites for iPhone X

Human Interface Guidelines

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93516.html

前端iPhone X適配總結

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

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

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

LiuRhoRamen 2019-08-01 18:42 評論0 收藏0
移動端布局與適配

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

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

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

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