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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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动态生成VRML网页
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JSONP之我见
2015/03/24 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
优秀党员推荐材料
2014/12/18 职场文书
新课程改革心得体会
2016/01/22 职场文书
医德医风学习心得体会
2016/01/25 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
python实现进度条的多种实现
2021/04/29 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Java字符串逆序方法详情
2022/03/21 Java/Android
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android
keepalived + nginx 实现高可用方案
2022/12/24 Servers