Question

我有div position:relative。在此div中，还有另一个div position:absolute。

我还将屏幕限制为800 * 600px。当我在Android操作系统上打开我的网页（在那里尝试使用Chrome浏览器）时，似乎每当键盘弹出时它都会推动整个视图。

所以我的问题是，有没有办法控制它？据我所知，似乎没有JavaScript或jQuery的控制，CSS仍然99％肯定没有。所以，我是对的吗？

Answer 1

隐藏手机中使用

按下的div

@media screen and (max-height: 480px){
    div{
        display: none;
    }
}

因此，只要键盘变为活动状态，就不会出现该特定元素。

Answer 2

我不认为你可以阻止键盘向上推动视图。通常，浏览器会降低窗口的高度，导致某些元素被推出视图之外。这样做是为了尝试将焦点文本字段放在视图中而不是隐藏在键盘后面。

我通过使用javascript将处理程序附加到文本输入或textarea焦点事件来解决此问题。然后我将body的scrollTop值更改为0，然后将元素滚动回视图。

以下是AngularJS中实施的解决方案。

element.focus(function() { //focus event handler

                $timeout( function(){

                    angular.element(document.querySelectorAll("body")).scrollTop( 0 ); //scroll body back

                    },1000);

                });

需要稍微延迟，因为在关注字段后键盘需要时间弹出。

CSS - Android键盘推高元素

2 个答案: