兼容问题

HTML：

ios Safari浏览器无法禁止用户缩放

    window.onload = function() {
        const lastTouchEnd = 0;
        document.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });
        document.addEventListener('touchend', function(event) {
            const now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
        document.addEventListener('gesturestart', function(event) {
            event.preventDefault();
        });
        document.addEventListener('dblclick', function (event) {
            event.preventDefault();
        })
    };

 ios input输入后，页面被撑起来没有回弹

 

 

 解决方法：

修改设置页面高度方式 并 增加失去焦点事件。

onBlur = { ()  => {
    window.scrollTo({top:0,left:0,behavior:"smooth"})
}}

增加了失去焦点事件后，依然高度不对 。

最后发现是页面高度的问题，因为要设置全屏，所以就给login页面设置了窗口高度，input onChange时， 修改了mirrox中的值，导致页面重新渲染，而IOS 键盘弹起的时候，会导致window.innerHeight发生改变，所以要给页面固定高度

 

const login = document.getElementById('login')
login.style.height = `calc(constant(safe-area-inset-top) + constant(safe-area-inset-bottom) + ${window.innerHeight}px)`;
login.style.height = `calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + ${window.innerHeight}px)`;

 

 

 

 

切记： 在有重新渲染的页面，一定要注意保证style的值会不会发生变化。