Jquery判断浏览器高宽、浏览器类型并设置echarts高度宽度

    xiaoxiao2021-03-25  39

    Jquery判断浏览器高宽、浏览器类型并设置echarts高度宽度

    作者: IT小兵 | 2014年5月12日| 热度:5038℃ | 评论:0 |参与:0

    在前几天做的echarts报表中,需要在手机端浏览。考虑到echarts是基于html5的,应该是可以的。

    但是这里需要判断2个地方

    1、浏览器类型:只需要判断是不是来自手机浏览器,即mobile端即可

    2、判断浏览器的高度宽度。

    方法分别为:

    1、

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28     /* * 智能机浏览器版本信息: * */          var  browser = {              versions:  function  () {                  var  u = navigator.userAgent, app = navigator.appVersion;                  return  { //移动终端浏览器版本信息                       trident: u.indexOf( 'Trident' ) > -1,  //IE内核                      presto: u.indexOf( 'Presto' ) > -1,  //opera内核                      webKit: u.indexOf( 'AppleWebKit' ) > -1,  //苹果、谷歌内核                      gecko: u.indexOf( 'Gecko' ) > -1 && u.indexOf( 'KHTML' ) == -1,  //火狐内核                      mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),  //是否为移动终端                      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  //ios终端                      android: u.indexOf( 'Android' ) > -1 || u.indexOf( 'Linux' ) > -1,  //android终端或者uc浏览器                      iPhone: u.indexOf( 'iPhone' ) > -1 || u.indexOf( 'Mac' ) > -1,  //是否为iPhone或者QQHD浏览器                      iPad: u.indexOf( 'iPad' ) > -1,  //是否iPad                      webApp: u.indexOf( 'Safari' ) == -1  //是否web应该程序,没有头部与底部                  };               }(),               language: (navigator.browserLanguage || navigator.language).toLowerCase()           }         //document.writeln("语言版本: "+browser.language);          //document.writeln(" 是否为移动终端: "+browser.versions.mobile);          //document.writeln(" ios终端: "+browser.versions.ios);          //document.writeln(" android终端: "+browser.versions.android);          //document.writeln(" 是否为iPhone: "+browser.versions.iPhone);          //document.writeln(" 是否iPad: "+browser.versions.iPad);          //document.writeln(navigator.userAgent);

    2、

    1 2 3 4 5 6 7 8 9 10 11 12 jquery获取浏览器的各种高度总结,现在才发现以前用js获取这些数据是多么的麻烦, jquery一句话就搞定了还把各浏览器的兼容性问题也给解决了。 alert($(window).height());  //浏览器时下窗口可视区域高度 alert($(document).height());  //浏览器时下窗口文档的高度 alert($(document.body).height()); //浏览器时下窗口文档body的高度 alert($(document.body).outerHeight( true )); //浏览器时下窗口文档body的总高度 包括border padding margin alert($(window).width());  //浏览器时下窗口可视区域宽度 alert($(document).width()); //浏览器时下窗口文档对于象宽度 alert($(document.body).width()); //浏览器时下窗口文档body的高度 alert($(document.body).outerWidth( true )); //浏览器时下窗口文档body的总宽度 包括border padding margin alert($(document).scrollTop());  //获取滚动条到顶部的垂直高度 alert($(document).scrollLeft());  //获取滚动条到左边的垂直宽度

    调用和修改echarts的高宽:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15    $(document).ready( function  () {              var  pagewidth = $(window).width();              var  pageheight = $(window).height();              if  (browser.versions.mobile) {                                $( "#time_behavior_bar" ).height(pageheight*0.6);                  $( "#time_behavior_bar" ).width(pagewidth * 0.95);              }              else  {                  $( "#time_behavior_bar" ).height( "500px" );                  $( "#time_behavior_bar" ).width( "700px" );              }             //下面是加载echarts报表              init();          });
    转载请注明原文地址: https://ju.6miu.com/read-50019.html

    最新回复(0)