html5簡單iphoneX劉海屏適配的方法

這篇文章主要介紹“html5簡單iphoneX劉海屏適配的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html5簡單iphoneX劉海屏適配的方法”文章能幫助大家解決問題。

如何適配？

第一步，設置網頁在可視窗口的布局方式

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

iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現有 viewport meta 標簽的一個擴展，用于設置網頁在可視窗口的布局方式，可設置三個值：

• contain: 可視窗口完全包含網頁內容

• cover：網頁內容完全覆蓋可視窗口

• auto：默認值，跟 contain 表現一致

注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置 viewport-fit=cover，這是適配的關鍵步驟。

第二步，頁面主體內容限定在安全區域內

.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 函數

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

• safe-area-inset-left：安全區域距離左邊邊界距離

• safe-area-inset-right：安全區域距離右邊邊界距離

• safe-area-inset-top：安全區域距離頂部邊界距離

• safe-area-inset-bottom：安全區域距離底部邊界距離

注意：部分瀏覽器已經不支持constant函數，用env函數替代

上面設置了padding為12像素，如果旋轉方向后：

第三步，使用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是前端實現的，且固定在頂部，就會出現被遮擋的情況，這時候可以設置top值為安全距離值，比如：

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

關于“html5簡單iphoneX劉海屏適配的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。