移动端fixed元素中input文本框弹出虚拟键盘时样式错位（微信内置浏览器，qq浏览器）

代码以下：

$('input').bind("focus",function(){

   $("div").css({"position":"absolute"});

}).bind("blur",function(){

  $("div").css("position","fixed");

});

注：

　　input：获取焦点的文本框；

　　div：文本框的fixed定位父级；

 

若是不考虑横竖屏的话，以上代码就ok了，

若是要考虑横竖屏 ，还需加上如下代码：

$(window).bind("onorientationchange",function(){

    switch(window.orientation) {

        case 0:

            $('div').css({'position':'fixed'});

            break;

        case -90:

            $('div').css({'position':'absolute'});

            break;

        case 90:

            $('div').css({'position':'absolute'});

            break;

        case 180:

            $('div').css({'position':'fixed''});

            break;

    }

});

 

注： 移动端页面若是有输入框，不建议放到fixed定位元素里边，建议使用绝对定位absolute；