在线客服
扫描二维码
下载博学谷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页面问题,欢迎大家登陆博学谷官网,在线学习相关的视频课程。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
30道常见Web前端面试题你会几个?
30道常见Web前端面试题你会几个?以下30到web前端面试答出了大多数的或者是全部的题表明你的基础扎实;只答出小部分或者答出了大部分题但答案不正确,说明水平还差的远,基础知识不扎实距离拿高薪还很遥远,需要基础夯实基础。
3774
2019-09-27 15:11:17
微信小程序实战项目开发教程
微信小程序依托着微信这个巨大的流量平台,从爆红后就一直发展得如火如荼。相信不少开发者都想朝着微信小程序这一新的机会与方向,开创一片新天地。那么,微信小程序应该如何开发呢?本文就来为大家介绍博学谷推出的微信小程序开发教程,课程通过实战项目的讲解,让大家学完就能独立上手小程序开发的工作。
3342
2019-10-25 14:49:49
在线学习前端开发需要什么基础?
在线学习前端开发需要什么基础?会这么问的小伙伴,一定是不了解博学谷的零基础前端课程。一般来讲,普通的在线课程确实需要学习者有一些的前端知识的基础,比如HTML、CSS和JavaScript基础语法等等。但是博学谷专门为零基础的学员开设了前端在线课程,内容循序渐进,搭配着相关的项目实践,可以说是完全从零开始手把手的前端教程,即便是IT小白也可以跟得上课程进度。
4359
2019-10-25 19:09:09
HTML入门基础知识学习教程
HTML基础知识早已成为设计师、前端工程师、后台开发工程师、电子商务的人员的必备技能之一。那么如何学习HTML基础知识呢?这里向大家推荐博学谷的在线免费视频课程,课程包括了前端的核心基础技术HTML和CSS,同时还有相关案例拆分讲解,帮助大家全面掌握基础知识,轻松入门学习HTML。下面是具体的教程介绍:
2956
2019-12-10 17:36:28
Web前端开发三剑客是做什么的?
大家都熟知,Web前端开发三剑客就是HTML、CSS、JavaScript。通过三种技术的融合产生了各式各样的网站。那Web前端开发三剑客分别是做什么的呢?主要在网站开发中主要完成哪些动作?
8230
2020-08-03 11:55:49