javascript判断移动端访问设备并解析对应CSS的方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法。分享给大家供大家参考。具体分析如下:

javascript判断不同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 相关文章推荐
js中prototype用法详细介绍
Nov 14 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
Javascript数组操作函数总结
Feb 05 #Javascript
Javascript毫秒数用法实例
Feb 05 #Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 #Javascript
node.js集成百度UE编辑器
Feb 05 #Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 #Javascript
JavaScript计时器示例分析
Feb 05 #Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 #Javascript
You might like
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python类继承用法实例分析
2014/10/10 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python开启debug模式的方法
2019/06/27 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
生产总经理岗位职责
2013/12/19 职场文书
机动车交通事故协议书
2015/01/29 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
公司与个人合作协议书
2016/03/19 职场文书