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 12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
package.json各个属性说明详解
Mar 11 Javascript
Swiper实现导航栏滚动效果
Oct 16 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中截取中文字符串的代码小结
2011/07/17 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python筛选出两个文件中重复行的方法
2018/05/31 Python
python3人脸识别的两种方法
2019/04/25 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
公司面试感谢信
2014/02/01 职场文书
国际贸易专业求职信
2014/06/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书