Question

我有一个包含4个元素的移动网站，这些元素绝对位于100％高度div内，当我点击url栏时，div上的高度缩小并推动所有内容。

有没有解决这个问题？或者防止它改变100％？或者我需要使用JS获取屏幕大小并以这种方式修复它？如果我将其设置为准确的数量，它可以正常工作。

Answer 1

Android浏览器在打开键盘时调整窗口大小，没有解决办法来阻止它。

Answer 2

我能够通过将z-index设置为-1来解决这个问题，因为当Android浏览器在屏幕上弹出键盘时，DOM元素会受到阻碍，如下所示：

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

Kevin Pajak的回答为我工作。你也可以使用媒体查询：

your.css文件：

.hide-element-on-keyboard {
    z-index: 1;
}

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

Answer 4

类似于Charlie Carver，除了使用max-height和display：none

在Galaxy S7和iPhone 6s上测试

.hide-element-on-keyboard {
    display:normal;
}

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

Answer 5

我在 LinearLayout 中有一个 webview 并尝试了所有解决方案，但 this 示例有效。在 AndroidManifest.xml 文件中我感兴趣的活动下添加了此代码段。

android:windowSoftInputMode="adjustPan|stateAlwaysHidden"

Android OS键盘移动网站内容？

5 个答案: