千锋教育-IT职业教育良心品牌。千锋 HTML5 大前端课程颠覆升级：千锋全覆盖企业项目开发前端、中台、后台全流程，真实承接上下游需求，协同协作；项目交叉融合，PC端、移动端、智能终端，各平台功能实现，技能进步看得见；还原企业真实开发场景，从项目立项到部署上线全程参与，不落下每一个开发环节；高验收标准，以真实企业需求要求功能实现，项目无BUG，流畅运行；基础-专业-项目-企业-就业-职后六维全息课程覆盖职场就业与职后发展，助力学员从全栈工程师向架构师进阶，满足不同职业发展需求。

　　随着H5页面越来越流行，越来越多的开发者都开始用较近H5做微信公众号，在这个过程中自然也会遇到不少的问题。小编在这里整理了几种常见的微信H5页面兼容性问题，来和大家分析一下问题的详情、出现原因以及相对应的解决方法。有相关问题的小伙伴，就一起来看看吧！

　　1、ios端微信h5页面上下滑动时卡顿、页面缺失。

　　问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。

　　出现原因分析：

　　笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】

　　解决办法：只需要在公共样式加入下面这行代码

　　*{

　　-webkit-overflow-scrolling: touch;

　　}

　　2、安卓弹出的键盘遮盖文本框

　　问题详情描述：

　　安卓微信H5弹出软键盘后挡住input输入框。

　　解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

　　changefocus(){

　　let u = navigator.userAgent, app = navigator.appVersion;

　　let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

　　if(isAndroid){

　　setTimeout(function() {

　　document.activeElement.scrollIntoViewIfNeeded();

　　document.activeElement.scrollIntoView();

　　}, 500);

　　}

　　}