解决iponeX刘海全屏兼容问题

解决刘海未全屏的问题 :

1.在 viewport 中添加 viewport-fit=cover

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

此时本地不会报警告,上线后打开控制台会报 

The key "viewport-fit" is not recognized and ignored.

解决方法 : 

清空 meta 标签中的空格

2.添加配套 css 兼容

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    html,body{height: 812px;

}