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 蒙版进度条(结合图片)
Mar 10 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
jquery禁用右键示例
Apr 28 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JS实现横向轮播图(初级版)
Jun 24 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
旺仔牛奶广告词
2014/03/20 职场文书
医学求职自荐信
2014/06/21 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python