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 相关文章推荐
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
再谈JavaScript线程
Jul 10 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
关于Javascript闭包与应用的详解
Apr 22 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动态函数调用方法
2015/05/21 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Python中除法使用的注意事项
2014/08/21 Python
python+mysql实现简单的web程序
2014/09/11 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
土木工程专业自荐信
2013/10/04 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
自我评价个人范文
2013/12/16 职场文书
2014年团委工作总结
2014/11/13 职场文书
南京导游词
2015/02/03 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
导游词之上海豫园
2019/10/24 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL