在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
随着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页面问题,欢迎大家登陆博学谷官网,在线学习相关的视频课程。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
HTML5在线培训哪个机构好?
在线培训哪个机构好?计划去参加培训HTML5的时候应该如何选择在线培训机构呢?现在的社会中各种培训机构遍地开花,很多人无从下手,其实选择HTML5在线培训的机构并不难,我们只需要需要从以下几点进行考虑:
8242
2019-07-24 18:31:54
前端面试题 HTML5
小编刚刚整理了一份2019年的前端面试题之HTML5,新鲜出炉,需要的同学赶紧来看一看吧!
5224
2019-07-25 19:04:49
HTML入门基础知识学习教程
HTML基础知识早已成为设计师、前端工程师、后台开发工程师、电子商务的人员的必备技能之一。那么如何学习HTML基础知识呢?这里向大家推荐博学谷的在线免费视频课程,课程包括了前端的核心基础技术HTML和CSS,同时还有相关案例拆分讲解,帮助大家全面掌握基础知识,轻松入门学习HTML。下面是具体的教程介绍:
3383
2019-12-10 17:36:28
企业级微信小程序开发实战学什么?
小程序无需安装或者卸载,不占用手机内存不受手机系统的限制一触即用。小程序目前入口不少于50个,且能覆盖附件的微信用户;与线上引流相结合,具备强大的传播能力。因此掌握微信小程序开发技能必不可少。
4070
2020-01-03 16:33:33
十款好用的HTML生成工具推荐
网页设计是把颜色、图片和字体等等要素进行组合调整,达到网页页面美化的目的,在给用户带来完美的视觉体验的同时,也为用户提供更好的使用体验。因此,网页设计需要考虑的设计因素有很多,绝不仅仅只是为了美观。本文将为推荐十款好用的HTML生成工具,帮助大家更高效率的完成网页设计。
8481
2020-02-21 11:43:40