微信下html页面，键盘弹出，页面变形

Question

正常页面是这样子的：

然后点击输入框后，键盘弹出，页面被压缩了，然后按钮向上移动了，如下图所示：

页面布局上的元素的位置用的是绝对定位，absolute。

这个问题有什么办法可以解决吗

2015 12 21 11：40
暂时找到了一个解决办法。

由于安卓下键盘弹出会导致页面resize的，写个监听resize事件

    var HEIGHT = $('body').height();
        $(window).resize(function() {
            $('.main').height(HEIGHT);
        });

当键盘弹出的时候，重置为原来的高度

Answer 1

最外层容器用js设置为屏幕宽高，这样键盘弹出也没事

Answer 2

Height不能写成百分比，得写成固定数值，通过js获取当前设备的height

Answer 3

直接写死高度就好啊，毕竟输入时又不需要看屏幕上面的东西（你压缩成这样也看不清楚啊）

Answer 4

今天我也遇到这个问题了，后来采用正常的文档流不适用绝对定位解决的。
早点看到前面几位兄弟的回答就好了
总结一下安卓下面解决input键盘弹出导致页面压缩变形的方法：
1.不对input使用绝对定位，使用绝对定位会脱离文档流导致在安卓上被压缩变形。
2.
写个监听resize事件

var HEIGHT = $('body').height();
    $(window).resize(function() {
        $('.main').height(HEIGHT);
    });

当键盘弹出的时候，重置为原来的高度

3.最外层容器用js设置为屏幕宽高，这样键盘弹出也没事,Height不能写成百分比，得写成固定数值，通过js获取当前设备的height.

Answer 5

最好的办法是直接在html里写上静态样式，像这样：