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背景插件backstretch使用指南
Apr 21 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JS中数组重排序方法
Nov 11 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
深入详解JS函数的柯里化
Jun 09 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中Session的概念
2006/10/09 PHP
PHP常用数组函数介绍
2014/07/28 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
介绍Python中的__future__模块
2015/04/27 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
八年级美术教学反思
2014/02/02 职场文书
三个儿子教学反思
2014/02/03 职场文书
教师自我反思材料
2014/02/14 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
品质保证书格式
2015/02/28 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL