移动端兼容处理

Posted 2020-10-26 MJ_MY

首先上一段判断android和ios的js代码

  function navigator(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
            //安卓
        };
        if(isiOS){
            //ios
        };
    };
navigator();

IOS常见问题：

1.搜索页的搜索按钮不显示，加form解决。

<form action="">
          <input type="search" name="" id="" value="" />
 </form>

2.去除input阴影和黑边，以及type=“search”的小叉叉。

css：
//去除阴影和黑底
input:-webkit-appearance:none;(全局input都会去除阴影和黑底，可以针对某个input就行了。)


//去除小叉叉
input[type="search"]::-webkit-search-cancel-button{

     -webkit-appearance:none;
}

ios:监听键盘弹起和收起：

$(document).on("focusin",function(){

            //键盘弹出
})


$(document).on("focusout",function(){

            //键盘收起
})

ios:当头部输入框聚焦时，想要弹起底部固定定位的元素，放在键盘上方，比如footer，或者上传图片的按钮什么的，但是发现弹不起来，没关系我有解决方法。

function navigator(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
            
        };
        if(isiOS){
            $(document).on("focusin",function(){
                                //键盘弹起时，让滚动条滚动到底部，
                $(window).scrollTop($("body").height());
                                 //设置定时器
                setTimeout(function(){
                                        //获取文档高度
                    var clientHeight= document.body.clientHeight;
                                         //获取滚动高度--也就是键盘高度
                    var scrollTop = document.body.scrollTop;
                    //让你想要的底部元素的bottom：键盘高度。
                    $(".bottom").css("bottom",scrollTop+"px");
                    //最后再设置一个定时器让滚动条回到顶部。
                                          setTimeout(function(){
                                               $(window).scrollTop(0);
                                          },300);
                },300);
            });
            $(document).on(‘focusout‘, function () {
                 //软键盘收起的事件处理
                                 //让底部元素回到底部。
                $(".bottom").css("bottom","0");
            });
        };
    };
navigator();                                                                                                                   

android：

1.键盘收起事件：

function navigator(){
        var u = navigator.userAgent;
        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
              var wHeight = $(window).innerHeight();   //获取初始可视       窗口高度
                      $(window).resize(function() {         //监测窗口大小的变化事件
                         var hh = $(window).innerHeight();     //当前可视窗口高度
                         var viewTop = $(window).scrollTop();   //可视窗口高度顶部距离网页顶部的距离
                         if(wHeight > hh){          
                                //可以作为虚拟键盘弹出事件
                     
                          }else{         
                               //可以作为虚拟键盘关闭事件
                                 
                          };
                              wHeight = hh;
                        });
        };
        if(isiOS){
        
            };
};
navigator();