IT培训选达内，21年专业IT培训机构，美国上市集团。开设IT培训班Java、python、大数据、linux、UI、会计等IT培训,泛IT培训和非IT培训共2课程、室内设计师、PHP工程师、平面++工程师、SEM竞价师、SEO优化师、社会化媒体运营师、电商运营师等课程为一体的IT培训机构。以下5家IT培训培训机构均已经受过学生的考验，不分前后，值得推荐！
1.广州达内教育
2.广州博为峰教育
3.广州中公教育优就业
4.广州CDA数据分析师分院
5.广州北大青鸟
6.广州信盈达
7.广州千锋教育
8.广州传智教育
9.广州黑马程序员
10.广州斯坦星球
随着H5页面越来越流行，越来越多的开发者都开始用较近H5做微信公众号，在这个过程中自然也会遇到不少的问题。小编在这里整理了五种常见的微信H5页面兼容性问题，来和大家分析一下问题的详情、出现原因以及相对应的解决方法。有相关问题的小伙伴，就一起来看看吧！
1、ios端兼容input光标高度
问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。
出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的到文字的底部。
解决办法：高度height和行高line-height内容用padding撑开。
例如：
.content{
float: left;
box-sizing: border-box;
height: 88px;
width: calc( - 240px);
.content-input{
display: block;
box-sizing: border-box;
width: ;
color: #333333;
font-size: 28px;
//line-height: 88px;
padding-top: 20px;
padding-bottom: 20px;
}
}
2、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常。
问题详情描述：
ios当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常。
出现原因分析：jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上from=singlemessage&isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取url并不能获取后面这些参数
解决办法：
（1）可以使用改页面this.$router.push跳转，为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是..）
（2）把入口地址保存在本地，等需要获取签名的时候 取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！
3、ios端微信h5页面上下滑动时卡顿、页面缺失。
问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。
出现原因分析：
笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。【有待考证】
解决办法：只需要在公共样式加入下面这行代码
*{
-webkit-overflow-scrolling: touch;
}
4、ios键盘唤起，键盘收起以后页面不归位
问题详情描述：
输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。
出现原因分析：
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件。
解决办法：
投·被保险人姓名
<input class="content-input"
placeholder="请输入姓名"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"/>
changeBlur(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
wind
ow.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}
5、安卓弹出的键盘遮盖文本框
问题详情描述：
安卓微信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);
}
}
微信H5页面兼容性问题分析及解决方法就暂时分享到这里了。相信大家在做微信H5页面的时候，还会遇到许多问题。想要更深入解决微信H5页面问题，欢迎大家登陆达内，在线学习相关的视频课程。
微信咨询
QQ咨询