用jq设置web端浏览器自适应效果（兼容IE7以上）

最新推荐文章于 2021-02-26 06:50:52 发布

原创最新推荐文章于 2021-02-26 06:50:52 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #浏览器 #ie 7 #web

html + css 同时被 3 个专栏收录

7 篇文章

订阅专栏

html5 + css3

5 篇文章

订阅专栏

问题解决方法

4 篇文章

订阅专栏

本文介绍了一种基于JavaScript实现的网页自适应布局方法，通过判断浏览器类型和窗口大小来调整页面元素的比例，确保不同分辨率下都能保持良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义判断浏览器的变量：

var isFirefox = navigator.userAgent.indexOf("Firefox")>0   //判断火狐
     ,isIE8     = navigator.userAgent.indexOf("MSIE 8.0")>0  //判断IE8
     ,isChrome     = navigator.userAgent.indexOf("Chrome")>0  //判断谷歌
     ,jrIE      = document.documentMode                      //判断IE兼容版本
    ;

2、定义缩放名的变量：

var zoom = 'zoom';
  if(isFirefox){
    zoom = 'transform';
  }

3、定义缩放参数的函数：

function zoomVal(val){
  if(isFirefox){
       return 'scale('+ val +')';
   }else{
       return val;
   }
 }

4、自定义一个函数执行浏览器的自适应：

function adaptive (){
  //定义需要自适应的元素变量
  var body_w = document.body.clientWidth
     ,focus = $('.class .class_bannerBox ')
     ,box   = [$('.class ')
               ,$('.class .class_box')
              ]
      ;

   //定义一个boxZoom函数，执行需要缩放的box盒子元素
   function boxZoom(value){
      for(var i=0,len=box.length;i<len;i++){
        box[i].css(zoom,zoomVal(value));
      }
    }

    //执行banner 图自适应,banner图是用绝对定位absolute,所以需要重新设置属性
    if(body_w <= 1366){
      focus.height('value').children().css({'height':'value','margin-left':'-value'});
    }else{
      focus.height('value').children().css({'height':'value','margin-left':'-value'});
    }

    //box盒子执行自适应缩放,具体的内容可以具体定义
    if(body_w > 1366) {
        boxZoom(1);
    } else {
        boxZoom(0.802);
        if(jrIE <= 11) {
           $('.class_box').css({'margin-top':'value'});
           ...
        }
    }

  }

  adaptive();
  //拉伸浏览器时触发
  $(window).resize(function(){adaptive ();});