html5簡單iphoneX劉海屏適配方法案例分享！

在手機(jī)的迭代更新中越來越多的手機(jī)不斷的更新出世，各種樣式層出不起，那么今天我們就來介紹一下：“html5簡單iphoneX劉海屏適配方法案例分享！ ”這個(gè)方面的內(nèi)容。

iphonex的劉海屏且不說好看不好看，但是確實(shí)給開發(fā)造成一定困擾，有些PM希望產(chǎn)品能夠全屏展示，于是客戶端就把劉海以上的空間讓出來讓前端處理，造成一個(gè)問題就是當(dāng)頁面頭部固定在頂部時(shí)，如果上下滑動(dòng)頁面會(huì)有較大縫隙出現(xiàn)，如果背景全是白色還好，否則跟斷層了似的，非常難看。

iphone屏幕尺寸

iphoneX與其他機(jī)型尺寸上的差異

導(dǎo)致上述問題的原因就是iphoneX存在安全區(qū)域，安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖藍(lán)色區(qū)域：

也就是說，我們要做好適配，必須保證頁面可視、可操作區(qū)域是在安全區(qū)域內(nèi)。

具體尺寸，詳見Human Interface Guidelines – iPhoneX

如何適配？

第一步，設(shè)置網(wǎng)頁在可視窗口的布局方式

<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

iOS11 新增特性，蘋果公司為了適配 iPhoneX 對(duì)現(xiàn)有 viewport meta 標(biāo)簽的一個(gè)擴(kuò)展，用于設(shè)置網(wǎng)頁在可視窗口的布局方式，可設(shè)置三個(gè)值：

• contain: 可視窗口完全包含網(wǎng)頁內(nèi)容（左圖）
• cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口（右圖）
• auto：默認(rèn)值，跟 contain 表現(xiàn)一致

注意：網(wǎng)頁默認(rèn)不添加擴(kuò)展的表現(xiàn)是 viewport-fit=contain，需要適配 iPhoneX 必須設(shè)置 viewport-fit=cover，這是適配的關(guān)鍵步驟。
具體詳見：The viewport-fit descriptor

第二步，頁面主體內(nèi)容限定在安全區(qū)域內(nèi)

.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-left: const(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-right: const(safe-area-inset-right);
}

constant 函數(shù)

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

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

注意：部分瀏覽器已經(jīng)不支持constant函數(shù)，用env函數(shù)替代

默認(rèn)情況下，如果客戶端處理了安全區(qū)域，效果如下：

使用全面屏viewport-fit=cover屬性后：

安全區(qū)域圖：

限定安全區(qū)域后效果圖：

上面設(shè)置了padding為12像素，如果旋轉(zhuǎn)方向后：

第三步，使用min()和max()方法

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

fixed元素固定問題

如果頁面title是前端實(shí)現(xiàn)的，且固定在頂部，就會(huì)出現(xiàn)被遮擋的情況，這時(shí)候可以設(shè)置top值為安全距離值，比如：

.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}

參考文章：Designing Websites for iPhone X

以上就是有關(guān)于：“html5簡單iphoneX劉海屏適配方法案例分享！ ”這個(gè)方面相關(guān)內(nèi)容的分享，當(dāng)然了在html5中使用的范圍不止如此，更多有關(guān)于html5這方面的學(xué)習(xí)內(nèi)容我們都可以在W3Cschool中學(xué)習(xí)和了解！