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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Javascript的比较汇总
2016/07/25 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python判断windows隐藏文件的方法
2014/03/21 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python运行异常管理解决方案
2020/03/09 Python
pytorch实现查看当前学习率
2020/06/24 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
How to spawning asynchronous work in J2EE
2016/08/29 面试题
灵泰克Java笔试题
2016/01/09 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
会计学自我鉴定
2014/02/06 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
公司承诺书范文
2014/05/19 职场文书
总经理司机岗位职责
2015/04/10 职场文书