Partial IOS compatible processing of H5 pages

IOS compatible processing

Environment : uni-app develops H5 projects, and the H5 project link webview is embedded in the app

Popup window display level problem

Problem: The position of the mask layer is incorrect and there is a white border. The submit button should be at the bottom but is displayed on top of the popup.
Solution: Place the popup component in the outer component to avoid placing it in the inner component.

Page height calculation

There is a safe distance at the bottom of IOS. You should consider the safe distance when setting styles.height: calc(100vh - 50px - env(safe-area-inset-bottom));

Disable drop-down sliding page

mounted() {
    
    
    let element = document.getElementById('home')
    element.addEventListener('touchmove', function (e) {
    
    
        e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {
    
    passive: false}); //passive 参数不能省略，用来兼容ios和android
},