使用场景
页面底部有一行按钮栏,固定在窗口底部,即定位是position: fixed。当调起系统键盘时,底部按钮栏却在键盘上面,而希望的效果是底部按钮栏仍然在底部。同时解决当浏览器宽高发生变化时,多次触发onresize事件,只标记一次有效。
想象中的样式是这样的:
但是在安卓上,当输入手机号码唤起系统键盘时,按钮栏被顶到键盘上面了。大屏幕手机没什么影响,但小屏幕手机会挡住手机号码输入框,体验不友好。
部分页面布局以及样式代码
html:
<div class="btn-list">
<div class="cancel">返回</div>
<div class="pay-price">实付50元</div>
<div class="submit" id="confirmPay"