混合开发中，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%，去掉或还原成默认⾼度：
blur事件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);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。