h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案

本文介绍了在微信H5页面开发中遇到的兼容性问题,包括ios端input光标高度异常、页面滑动卡顿及页面内容丢失、键盘收起后页面不归位等。针对这些问题,提供了相应的解决策略,如通过调整height和line-height避免光标高度问题,使用-webkit-overflow-scrolling: touch缓解滑动卡顿,并通过监听键盘事件确保页面布局正常。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。

1、ios端兼容input光标高度

问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上

当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。

e4b16e8afa2cc86dac0f6bd6833b3484.png

出现原因分析:通常我们习惯用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上下滑动后,卡顿导致如左图下面部分丢失。

4c062ef4938cc503b080b58d411e1f50.png

出现原因分析:

笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值