在前几天做的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(); });