JQ兼容安卓和ios弹出系统键盘影响布局

本文探讨了在网页中遇到的问题,当在安卓或iOS设备上调起系统键盘时,固定定位的底部按钮栏被键盘遮挡。文章通过提供部分页面布局和样式代码,展示了期望的布局效果,并描述了在安卓设备上出现的问题。为解决这个问题,文章提及在onresize事件中调整.btn-list的定位方式,以确保在键盘弹出时,底部按钮栏能保持在页面底部。
摘要由CSDN通过智能技术生成

使用场景

页面底部有一行按钮栏,固定在窗口底部,即定位是position: fixed。当调起系统键盘时,底部按钮栏却在键盘上面,而希望的效果是底部按钮栏仍然在底部。同时解决当浏览器宽高发生变化时,多次触发onresize事件,只标记一次有效。
想象中的样式是这样的:
在这里插入图片描述但是在安卓上,当输入手机号码唤起系统键盘时,按钮栏被顶到键盘上面了。大屏幕手机没什么影响,但小屏幕手机会挡住手机号码输入框,体验不友好。
在这里插入图片描述

部分页面布局以及样式代码

html:

<div class="btn-list">
		<div class="cancel">返回</div>
		<div class="pay-price">实付50元</div>
		<div class="submit" id="confirmPay"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值