最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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()); //获取滚动条到左边的垂直宽度
代码如下 | 复制代码 |
$(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(); }); |
问题:在很多手机(性能差的?不确定),有的浏览器会出现浏览器自动退出的问题。
目前还没有解决办法。
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31