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();

        });