iphoneX移动端适配刘海屏的处理
2019-07-05 本文已影响0人
nora_wang
1.设置全屏的方式 viewport-fit=cover 默认值为：auto/contain，全屏值为：cover
<meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover">
2.css中设置的constant()专门处理刘海屏问题
constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性，专门用于应对刘海。
body {
padding: constant(safe-area-inset-top) constant( safe-area-inset-right ) constant( safe-area-inset-bottom) constant( safe-area-inset-left);
}
(此处的上右下左四个值为横屏时的方位)
//默认值
safe-area-inset-top=0， safe-area-inset-right=44px ， safe-area-inset-bottom=21px， safe-area-inset-left=44px
