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 live()调用不存在的解决方法
Feb 26 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
js转换对象为xml
Feb 17 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
js实现简单的随机点名器
Sep 17 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
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python实现识别相似图片小结
2016/02/22 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python中append实例用法总结
2019/07/30 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python绘制规则网络图形实例
2019/12/09 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
文秘专业个人求职信
2013/12/22 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014年食堂工作总结
2014/11/20 职场文书
财政局个人总结
2015/03/04 职场文书
硕士论文致谢范文
2015/05/14 职场文书
大学军训通讯稿
2015/07/18 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript