安卓操作系统键盘向上移动网站内容

Question

我有一个移动网站，有4个元素，它们绝对位于100%高度的div中，当我点击url栏时，div上的高度会缩小并向上推。

有没有办法解决这个问题？还是阻止它改变100%？或者我需要使用JS获得屏幕大小并以这种方式进行修复吗？因为如果我把它设置为一个精确的数量，它会很好。

Answer 1

android浏览器在打开键盘时会调整窗口大小，没有解决方案可以防止这种情况。

Answer 2

当Android浏览器在屏幕上弹出键盘时，我将DOM元素的z索引设置为-1，从而解决了这个问题，如下所示：

function hideNavbar() // needed for Android browser pushing up keyboard
{ 
    if (screen.height <= 480) // mobile
    {
        document.getElementById('navbar').style.zIndex = "-1";
    }
}

（我这样做是为了在输入文本框中的onclick事件），然后，使用"onblur"（即，当用户点击屏幕顶部的文本/搜索框时），将导航栏的zindex返回到"1"：

function showNavbar() // needed for Android browser pushing up keyboard
{
    if (screen.height <= 480) // mobile
    {
        document.getElementById('navbar').style.zIndex = "1";
    }
} 

Answer 3

类似于Charlie Carver，除了使用最大高度和显示：无

在Galaxy S7和iPhone 6s 上测试

.hide-element-on-keyboard {
    display:normal;
}
@media screen and (max-height: 550px) {
    .hide-element-on-keyboard {
        display: none;
    }
}

Answer 4

Kevin Pajak的回答对我有用。您也可以使用媒体查询：

你的.css文件：

.hide-element-on-keyboard {
    z-index: 1;
}
@media screen and (min-height: 300px) {
    .hide-element-on-keyboard {
        z-index: -1;
    }
}

Answer 5

我在LinearLayout中有一个web视图，并尝试了所有解决方案，但这个例子有效。在AndroidManifest.xml文件中我感兴趣的活动下添加了这个片段。

android:windowSoftInputMode="adjustPan|stateAlwaysHidden"