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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
基于Vue实现timepicker
Apr 25 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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载入页面时编码的方法
2014/07/29 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
javascript引导程序
2008/10/26 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
javascript如何创建对象
2016/08/29 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python读写Excel文件的实例
2013/11/01 Python
Python中的自省(反射)详解
2015/06/02 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python实现低通滤波器代码
2020/02/26 Python
python中spy++的使用超详细教程
2021/01/29 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
三爱活动实施方案
2014/03/19 职场文书
公证委托书标准格式
2014/09/11 职场文书
2015年公司工作总结
2015/04/25 职场文书
个人更名证明
2015/06/23 职场文书
2015年中秋寄语
2015/07/31 职场文书
思想工作总结范文
2015/08/12 职场文书
详解Python中下划线的5种含义
2021/07/15 Python