JS判断移动端访问设备并加载对应CSS样式


Posted in Javascript onJune 13, 2014

JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的)

// 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
if(window.location.href.indexOf("?mobile")<0){ 
try{ 
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ 
// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式 
setActiveStyleSheet("style_mobile_a.css"); 
} 
else if(/iPad/i.test(navigator.userAgent)){ 
// 判断访问环境是 iPad 则加载以下样式 
setActiveStyleSheet("style_mobile_iPad.css"); 
} 
else{ 
// 判断访问环境是 其他移动设备 则加载以下样式 
setActiveStyleSheet("style_mobile_other.css"); 
} 
} 
catch(e){} 
} 
} 
else{ 
// 如果以上都不是,则加载以下样式 
setActiveStyleSheet("style_mobile_no.css"); 
} 
// 判断完毕后加载样式 
function setActiveStyleSheet(filename){document.write("<link href="+filename+" rel=stylesheet>");}

加载页面
<script type="text/javascript"> 
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
if(window.location.href.indexOf("?mobile")<0){ 
try{ 
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ 
window.location.href="手机页面"; 
}else if(/iPad/i.test(navigator.userAgent)){ 
window.location.href="平板页面"; 
}else{ 
window.location.href="其他移动端页面" 
} 
}catch(e){} 
} 
} 
</script>
Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
改变状态栏文字的js代码
Jun 13 #Javascript
js数组中如何随机取出一个值
Jun 13 #Javascript
可编辑下拉框的2种实现方式
Jun 13 #Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 #Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 #Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 #Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 #Javascript
You might like
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php中adodbzip类实例
2014/12/08 PHP
php发送邮件的问题详解
2015/06/22 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
js判断浏览器是否支持html5
2014/08/17 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python高效编程技巧
2013/01/07 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
python调用摄像头的示例代码
2020/09/28 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
感恩寄语大全
2014/04/11 职场文书
承诺书范本大全
2015/05/04 职场文书
从事会计工作年限证明
2015/06/23 职场文书
三八妇女节致辞
2015/07/31 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL