当软键盘处于活动状态时,网页会向上滑动

Question

我有一个聊天页面布局Web应用程序,底部有输入,顶部有一个标题.当输入处于焦点时,页面向上移动.

这些标题存在于我的页面中,用于防止缩放或其他不需要的行为.

<meta name="viewport" content="width=device-width,initial-scale=1">

当尝试使用javascript调整窗口大小window.innerHeight但是即使使用a也不能正常工作setTimeout()

是否有一种解决方法,浏览器不会平移整个页面,或通过减去键盘的高度来调整大小？

Answer 1

克隆 header 主要元素，并将其放在 if 的顶部，每当用户聚焦于输入时，这将是最简单的答案。

$('#example').clone().addClass('cloned').prependTo('body');

但是，您必须向该元素添加唯一的类，并为该类提供以下 css，

.cloned {
    position:fixed;
    left:0;
    top:0;
    z-index:'give highest z-index';
}