原创 微信H5页面兼容性问题分析及解决方法

发布时间:2019-11-12 16:12:01 浏览 3531 来源:博学谷 作者:照照

    随着H5页面越来越流行,越来越多的开发者都开始用最近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(100% - 240px);

     

    .content-input{

     

    display: block;

     

    box-sizing: border-box;

     

    width: 100%;

     

    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框不能再次输入 在失去焦点的时候给一个事件。

     

    解决办法:

     

    <div class="list-warp">

     

    <div class="title"><span>投·被保险人姓名</span></div>

     

    <div class="content">

     

    <input class="content-input"

     

    placeholder="请输入姓名"

     

    v-model="peopleList.name"

     

    @focus="changefocus()"

     

    @blur.prevent="changeBlur()"/>

     

    </div>

     

    </div>

     

    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页面问题,欢迎大家登陆博学谷官网,在线学习相关的视频课程。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: Web前端页面设计流程及注意事项 下一篇: HTML5开发工程师要干什么?有发展前途吗?

相关推荐 更多

热门文章

  • 前端好找工作吗?现在前端还值得入行吗?
  • 全国计算机专业大学排名清单
  • 学习大数据必须掌握哪些核心技术?
  • 女生到底适不适合学编程做程序媛?
  • 北京电商运营培训班多少钱?贵吗?
  • IT行业选哪个学科职业发展空间大?
  • 入门Python基础知识点总结
  • 入行数据分析可行吗?适不适合学习?
  • 学Java开发能实现月薪12K吗?
  • Java程序员面试自我介绍部分讲什么内容?技巧分享
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码