• 幕客老师召集小伙伴
  • python自动化运维项目实战
  • nginx从入门到实战
  • 阿里云与Centos7实战

Jquery适配浏览器

一、功过Jquery进行浏览器适配

匹配出哪些UA类型,从而作出对于的行为

    <script type="text/javascript">
        var ua = navigator.userAgent;
        var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
        isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
        isAndroid = ua.match(/(Android)\s+([\d.]+)/),
        isMobile = isIphone || isAndroid;
        if(isMobile) {
            $(".breadcrumb").after($("#widget-populars"));
            $("#widget-populars").show();
//            $("#widget-populars2").hide();
            $("#widget-comments").hide();
            $("#widget-linkbacks").hide();
            $(".J_Poster").hide();
//            $("#widget-populars-mobile").hide();
        }else {
            $("#widget-populars").show();
//            $("#widget-populars-mobile").hide();
        }
        $("#images_size").each(function(){
            if($(this).width() > $(this).parent().width()) {
                $(this).width("100%");
            }
        });
    </script>

二、网页浏览器中缩放适配

如果浏览器触发发生缩放的行为,将触发图片元素进行等比例缩放,如下例所示:

    <script type="text/javascript">
        $(document).ready(function(){
        $(window).resize(function(){
           windows_w = $(window).width()
           if(windows_w<1000){
              var w_how = (windows_w/1000);
              post_main_w = $(".poster-main").width();
              post_list_w = $(".poster-list").width();
              $(".poster-main").width((w_how*post_main_w));
              $(".poster-list").width((w_how*post_list_w));
              $(".poster-main img").width((500*w_how));
//              console.log((500*w_how));
           }else{
              $(".poster-main").width(700);
              $(".post_list").width(700);
              $(".poster-main img").width((576));
           }
//         $("#imgId").height($(window).height());
//         $("#imgId").width($(window).width());
        });
        });
    </script>

 

Jquery适配浏览器

Pingbacks已打开。

引用地址

暂无评论

发表评论