安卓手机键盘弹出导致h5页面错乱

原创

已于 2023-09-07 13:58:01 修改 · 1.6k 阅读

标签

#前端

收录于

于 2022-04-25 15:30:19 首次发布

在安卓设备上，当键盘弹出时，含有表单的H5页面出现布局错乱，如提交按钮和底部图片被挤压。针对此问题，可以尝试使用相对定位(position: relative;)替代绝对定位，或者尝试其他解决方案，但某些方法可能不适用于所有场景。

安卓手机键盘弹出导致h5页面错乱

特别是有表单的h5，点击input输入信息的时候提交的按钮、以及定位到下方的图片都会被挤上来。
解决方法如下：
方法一：不要用绝对定位，改成position:relative;定位；（推荐）
方法二：（推荐）

<div class="inputbox">
	<div class="title name">
		<div><b>姓名</b><br>
			<input type="" name="" id="name1" value="" placeholder="请填写您的姓名" required />
		</div>
	</div>
	<div class="title"><b>手机</b><br>
		<input type="" name="" id="phone" value