移动键盘覆盖输入字段

Question

我正在为移动网站开发一个表单 - 这是我的第一个表单，所以现在感觉我的方式。

我有视口集，这些对CSS没有什么特别之处 - 这就是我在开发中的表现：

.input-control {
    padding:3.2rem 0 0.8rem 0;
    position:relative;
}

.input-control input {
    border-bottom:solid 0.1rem @divider;
    color:@secondaryText;
    font-size:1.6rem;
    height:3.2rem;
    line-height:2.4rem;
    padding:0.4rem 0;
    width:100%;
}

.input-control label {
    color:@hint;
    font-size:1.6rem;
    line-height:2.4rem;
    position:absolute;
    left:0;
    top:3.6rem;
}

问题在于，移动设备上显示的键盘覆盖了输入字段，如果它在页面上的低位，我会专注于它 - 当然这应该是可以看到的。

我一直在寻找网络，并且有很多关于键盘的文章，但大多数是关于应用而不是网站。

我能做些什么吗？

Answer 1

您是否在任何祖先上使用过position: fixed？我曾经遇到同样的问题，这就是原因，移动浏览器并不总是知道如何处理它。