国产乱码一区二区三区四区_国产精品免费不卡_国产精品一区精品国产自在_亚洲国产精品97久久无色_一本之道无人区_俄罗斯胖老太牲交

解決方案

1. 默認全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

在 viewport 的 meta 屬性中，添加 viewport-fit=cover 即可。

viewport-fit 默認值為 auto/contain，全屏值為cover，是不是感覺很熟悉？嗯，和 background-size 以及 object-fit 一樣的。

2. 設置頁面邊距為安全區域邊距

body{  
    padding: 
        constant(safe-area-inset-top) 
        constant(safe-area-inset-right) 
        constant(safe-area-inset-bottom) 
        constant(safe-area-inset-left);  
}

嗯，constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性，專門用于應對劉海的。。。

當然，這里的padding只是用于匹配iPhone X默認的安全區域的，你可以設置任何值，不過建議要不小于默認的安全區域值。

當前版本，橫屏時，各屬性的值：

safe-area-inset-top = 0  safe-area-inset-right = 44px  
safe-area-inset-bottom = 21px  
safe-area-inset-left = 44px

豎屏時各值都是 0，但豎屏時需要特別留意 status-bar(44px) 和 home-indicator(34px)。

源文鏈接：請點這里訪問