微信H5页面兼容性解决方案
点击上方蓝字关注,关注后还可加入「前端交流群」共同进步
作者:codercao
https://juejin.im/post/5d47d2eff265da03f77e4e3a
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。
1、ios端兼容input光标高度
问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上
当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的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、ios端微信h5页面上下滑动时卡顿、页面缺失
问题详情描述:在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,左边是ios上下滑动后,卡顿导致如左图下面部分丢失。
出现原因分析:
笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling
用了原生控件来实现。对于有-webkit-overflow-scrolling
的网页,会创建一个UIScrollView
,提供子layer给渲染模块使用。【有待考证】
解决办法:只需要在公共样式加入下面这行代码
*{ -webkit-overflow-scrolling: touch;
}
But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。
拓展知识: -webkit-overflow-scrolling:touch是什么?
MDN上是这样定义的:
-webkit-overflow-scrolling
属性控制元素在移动设备上是否使用滚动回弹效果.auto
: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch
: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
3、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 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }
拓展知识: position: fixed
的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘
4、安卓弹出的键盘遮盖文本框
问题详情描述:
安卓微信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); }
}
拓展知识:
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()
方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动
5、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); 只在刚进入单应用的时候保存!【该方法未验证】
题外话:
如果能用小程序写的页面,尽量上小程序吧,H5开发在微信开发者工具里看页面效果可能看不出问题,因为不能唤起软键盘。避免频繁线上发布,可以用花生壳或者idcfengye,做内网穿透,搭建一个可以通过域名访问的开发环境的h5页面,在手机上看看效果,对了微信内置浏览器缓存机制。会导致刚提交的代码(特别是js)效果要半个小时左右才生效。
最后:
微信H5页面其实很多知识,登陆授权,jssdk授权,这里就只做了分享,当然还有上传图片、微信支付等功能,都可能会遇到坑,以上几个坑也是比较常遇到的,如果有更好的解决方案的话,可以联系我哦。
![](/assets/blank.gif)
交流学习
大家好,我是koala,公众号「程序员成长指北」作者。公众号为您打造优质学习路线,并且会推送超级优质文章。加入我们一起学习吧!
在看你最美
微信H5页面兼容性解决方案相关推荐
- vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...
- 微信 H5 页面前端开发,大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)
1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...
- h5微信本地调试 vue_VUE开发微信H5页面总结
写在前面 刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫.现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录.防止自己以后再去解决解决过的问题. ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
- 微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题 参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
- 堆米微信H5页面怎么制作?易企秀微信H5页面制作,微信简历制作,
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
- 微信h5页面禁止下拉方法
微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动document.addEventListener('touchmove', function ...
最新文章
- intel 汇编中断解释
- spark-submit的执行原理
- 《朝花夕拾》金句摘抄(六)
- long转string mybatis_Spring+Mybatis类型转换的问题,oracle数据库中有一个clob类型,怎样在查询以后转换为String类型?...
- HTML表格修改字段,HTML表格 – 更改列中单个单元格的宽度
- C标准预定义实用的宏
- java B2B2C 源码 多级分销Springcloud多租户电子商城系统-SpringCloud配置中心内容加密...
- C语言编程题目(精心准备,特别适合C语言小白)
- Linux文件打包成不同后缀的压缩文件
- 微博结集成书 过把“作家瘾”
- 看了它就能看懂心电图室大部分心电图
- 关于PSINS运动轨迹仿真模块的理解和思考
- AcceptEx函数特点及需要提防的地方,看完了解更深入了,所以转过来
- Android 路径(Path)与剪裁(Clipping)详解
- 输入圆柱的高和半径,求圆柱体积,volume=π×r 2 ×h 。要求定义和调用函数cylinder (r, h )计算圆柱体的体积。
- 5G Massive MIMO的基础知识
- BDD之单元测试(三):BDD的官方教程
- 一位神秘实体店商家的心声
- bitmap和canvas实现图层叠加(可实现灰色遮罩)
- 电脑常用快捷键大全(含Visual Studio快捷键操作)