当移动浏览器调出键盘时,它会尝试移动滚动条,以便输入仍在视图中.
在iOS Safari上,它似乎通过查找最近的滚动父级来正确执行此操作.
在Android原生或Chrome移动浏览器上,它似乎只是尝试身体元素然后放弃,因此焦点输入隐藏在键盘下方.
设置overflow-y: hidden在body元素上.创建一个可滚动的容器并在其中放置一个表单.
当您选择靠近屏幕底部的元素时,它将被键盘遮挡.
http://dominictobias.com/android-scroll-bug/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Android scroll/focus bug</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
input {
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="scroll">
<input type="text" value="Input 1">
<input type="text" value="Input 2">
<input type="text" value="Input 3">
<input type="text" value="Input 4"> …