iphone x 网页兼容

默认的显示内容在安全区域，不会在圆角和设备的传感器内显示。

第一个新功能是扩展到现有的视区 meta 标记, 称为视区匹配, 它提供对镶行为的控制。视区适合在 iOS 11 中提供。设置viewport-fit可以全屏显示。

设置完viewport-fit=cover后，会发现title位置上移，这是因为刘海区域也给我们使用了。这时候可以通过适配iphone,在页头动态添加一个div.高度等于刘海高度，页面就可以正常显示了。

@media only screen and (device-width: 375px) and (device-height: 812px) and 
(-webkit-device-pixel-ratio: 3) {
    /*增加头部适配层*/
    .has-topbar {
        height: 100%;
        box-sizing: border-box;
        padding-top: 88px;
        &:before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 88px;
            background-color: #000000;
            z-index: 9998;
        }
    }

　　

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>

转载于:https://www.cnblogs.com/wlxll/p/7851416.html