Android OS键盘移动网站内容？

我有一个移动网站，其中包含4个元素，绝对定位在100％高度div内，当我点击url栏时，div上的高度收缩并推动所有东西。Android OS键盘移动网站内容？

有无论如何解决这个问题？或者阻止它改变100％？或者我需要使用JS来获取屏幕大小并修复它？如果我将它设置为确切数量，它工作正常。

来源

2012-03-01 Steven

当浏览器打开键盘时，android浏览器会调整窗口大小，但没有办法解决这个问题。

来源

2012-03-01 20:35:21 ChristopheCVB

这样，按理说，以防止这个问题的唯一方法是手动分配height属性。好的 – Steven 2012-03-01 20:37:11

是的，你明白了。 – ChristopheCVB 2012-03-01 20:38:59

或者，您可以在页面加载时抓取视口高度*，将其设置为常量，然后只引用该常量？ – zelusp 2016-08-26 17:47:19

我能够通过设置的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"; 
    } 
}

来源

2012-07-05 01:28:36

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

your.css文件：

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

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

来源

2017-11-04 02:08:28

Android OS键盘移动网站内容？

回答

相关问题