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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
几行js代码实现自适应
2017/02/24 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
python连接数据库的方法
2017/10/19 Python
python实现求特征选择的信息增益
2018/12/18 Python
python实现AES加密解密
2019/03/28 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
动员大会主持词
2014/03/20 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
优秀员工事迹材料
2014/12/20 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书