混合开发中,app内嵌h5页面时ios遇到的一些兼容问题及解决方法

1.input[type=checkbox]在ios端样式显示异常,黑色背景或边框,安卓正常

解决:

input[type=checkbox]:checked{
    background-color: transparent;
    border: none;
}

2.option标签在ios端不支持在onfocus事件中渲染dom,安卓和vue不影响

解决:

正常步骤,可在页面加载时提前加载数据渲染dom

3.ios的input失焦时,唤醒键盘后页面高度变低,后滑动的页面无法正常回弹

解决:

1》.看滑动的部分父元素是否有height:100%,去掉或还原成默认高度:

height:auto

2》.在失焦事件中强制还原页面高度:

$("input,select").blur(function(){
    setTimeout(function() {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    }, 100);
}) 
原文地址:https://www.cnblogs.com/wd163/p/14743717.html