混合开发中，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);
})  　

4.移动端上拉下滑滚动条卡顿，启动硬件加速

body {
　　-webkit-overflow-scrolling:touch;
　　overflow-scrolling: touch;
}

备注：无效的时候考虑可能客户端打包时的内核版本过旧，需要客户端升级

5.移动端点击事件为了验证用户是否在做双击事件延迟300ms

方法1.在mate标签添加user-scalabel=no，禁用用户缩放网页

方法2.fastclick.js。原理：在检测到touchend事件的时候 ，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

6.移动端1px显示兼容问题：如iphone4机型的retina屏幕的1px边框显示粗

原因：设计稿的1px/750px设计稿，小屏幕1px/375px,实际应是0.5px

解决：伪元素+transform实现：为什么用伪元素？ 因为伪元素 ::after 或 ::before 是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放 

.border-1px:before{
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #999;
    transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .border-1px:before{
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .border-1px:before{
        transform: scaleY(0.33);
    }
}