解决ios4下不支持position:fixed的问题

前言:
参考1
参考2
参考3

自以为解决了所有IOS系统关于position:fixed的所有问题,看来还是没有,特在此补充!!!

一、注意:不要在 fixed 元素中使用 input / textarea 元素。
在 android 手机下 fixed 表现要比 iOS 更好,软键盘弹出时,不会影响fixed元素定位;

还是保留之前的态度,依然不推荐在 Android下使用 iScroll。在开发项目时,可以考虑分为两个版本:iOS下使用 iScroll的
解决方案,Android下使用 position:fixed。*

二、解决:ios端点击document,input框不会失去焦点

 window.onload = function() {  
        document.querySelector('body').addEventListener('touchend', function(e) {  
            if(e.target.className != 'input') {  
                document.querySelector('.input').blur();  
            }  
        });  

    }  

三、“修复”:ios输入框获取焦点时不支持fixed的bug

$(document).ready(function(){
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isiOS ){
              $('body').on('focus','input',function(){
                       $('header').css("position","relative");
                       $('footer').css("position","relative");                                 
              }).on('focusout','input',function(){
                       $('header').css("position","fixed");
                       $('footer').css("position","fixed");                    
        });
    }                
}); 

四、如果上面三条仍然帮不了你,参考这里

猜你喜欢

转载自blog.csdn.net/qq_39198420/article/details/79270453