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 相关文章推荐
js确定对象类型方法
Mar 30 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
jQuery 源码分析笔记
2011/05/25 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
招聘专员岗位职责
2014/03/07 职场文书
外贸专业求职信
2014/03/09 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
监理中标通知书
2015/04/16 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
财务人员入职担保书
2015/09/22 职场文书
外出学习心得体会范文
2016/01/18 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python