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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
用PHP连接Oracle数据库
2006/10/09 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
Seajs的学习笔记
2014/03/04 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
js实现简单模态框实例
2018/11/16 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
Django中几种重定向方法
2015/04/28 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
护士自我鉴定
2013/10/23 职场文书
社区工作者感言
2014/03/02 职场文书
购房个人委托书范本
2014/10/11 职场文书
乐山大佛导游词
2015/02/02 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书