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 12 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 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
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP 转义使用详解
2013/07/15 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP 正则表达式小结
2015/02/12 PHP
php blowfish加密解密算法
2016/07/02 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
python如何为创建大量实例节省内存
2018/03/20 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python按钮的响应事件详解
2019/03/04 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python初步实现word2vec操作
2020/06/09 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
水利学院求职自荐书
2014/02/01 职场文书
合同意向书范本
2014/07/30 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python