H5设备兼容处理方法

通过navigator.userAgent来判断设备类型，在需要差异化定制样式的地方，给相应的元素添加设定好的class。

// ios顶部留出20px高度
.havetop {
    .my-header {
        padding-top: 20px;
    }
    .content {
        padding-top: 20px;
    }
}
.isios {
    .my-header {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
    .content {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
}
<script>
    window.onload = function () {
        document.getElementById('app').classList.add('havetop');
        if (/iPhone/.test(navigator.userAgent)) {
            document.getElementById('app').classList.add('isios');
        }
    }
</script>