一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery判断浏览器高宽与类型设置echarts高度宽度

时间:2014-05-12 编辑:简简单单 来源:一聚教程网

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

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

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

方法分别为:

 代码如下 复制代码
 /*
* 智能机浏览器版本信息:
*
*/
        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、

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的高宽:

 代码如下 复制代码
$(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");
            }
                     init();
        });

问题:在很多手机(性能差的?不确定),有的浏览器会出现浏览器自动退出的问题。

目前还没有解决办法。

 

热门栏目