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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
Javascript闭包实例详解
Nov 29 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
js实现倒计时关键代码
May 05 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
vue实现简单学生信息管理
May 30 Javascript
Array.filter中如何正确使用Async
Nov 04 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 Cookie的使用教程详解
2013/06/03 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
基于python3的socket聊天编程
2020/02/17 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
小学教师学期末自我评价
2013/09/25 职场文书
大学生党课思想汇报
2013/12/29 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
教师自我反思材料
2014/02/14 职场文书
技术合作协议书范本
2014/04/18 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
普通话演讲稿
2014/09/03 职场文书
县委务虚会发言材料
2014/10/20 职场文书
小学优秀教师材料
2014/12/15 职场文书
玄武湖导游词
2015/02/05 职场文书
公司车队管理制度
2015/08/04 职场文书
python 爬取华为应用市场评论
2021/05/29 Python