js如何判断用户是在PC端和还是移动端访问


Posted in Javascript onApril 24, 2014

最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验。伴随Android平台的红火发展。不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中。如果很多互联网大浪潮你错过了。那么这个Android浪潮你绝对不能错过。目前我们为“咖啡之翼”已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果。同时Android客户端已经上架到腾讯“应用宝”和“百度手机助手”等应用商城。大家可以直接搜索“咖啡之翼”进行下载。在没有任何的推广的情况了,仅仅上架一周,已经拥有超过100+的下载量。

如果需要对移动终端进行优化,必须要做的就是,判断客户机的访问设备是什么。通过判断的结果,返回不能的域名地址,继而加载不同的CSS文件。

我们使用的判断方式是通过user-agent值,来进行判断。使用javascript框架中的Navigator对象的userAgent属性。navigator 对象没有公开标准,不过现在市面上所有浏览器都支持该对象。使用userAgent属性返回由客户机发送服务器的 user-agent 头部的值。头信息中有一个 User-Agent,它的作用是告诉服务器,用户客户端是什么浏览器,以及操作系统的信息的。使用正则表达式进行user-agent值的获取。和本地的值进行判断,这个匹配值可以是移动操作系统例如Android,ios,也可以为浏览器的名称。有匹配项则跳转,否则则不会跳转,直接进入PC端首页。

具体的代码实现,我们为了提高网站的可移植性,使用了JavaScript脚本语言。使用此技术的好处在笔者看来有两点

1:可以提高网站的可移植性,如果在此后的Web项目中,我们团队需要再一次加入移动终端的效果,就可以很轻松的引入这部分的JS代码,进行判断。提高以后的工作效率。

2:第二点是便于Web程序可以在不用的界面加载,是否引入这部分移动终端的判断代码。

具体实现:

我们把判断访问的脚本抽离,如果哪个页面需要进行客户终端的判断,我们就直接在页面使用<script></script>引入脚本程序,具体判断代码如下:

function uaredirect(f){ 
try{if( 
document.getElementById("bdmark")!=null){ 
return 
} 
var b=false; 
if(arguments[1]){ 
var e=window.location.host;var a=window.location.href; 
if(isSubdomain(arguments[1],e)==1){ 
f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true} 
else{f=a;b=false}}} 
else{b=true}if(b){var c=window.location.hash; 
if(!c.match("fromapp")){ 
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|Windows Phone)/i))){location.replace(f)}}}}catch(d)<br> {<br>
 }<br>}
Javascript 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
微信小程序实现上传图片功能
May 28 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
jquery 扑捉回车键事件代码
Apr 24 #Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 #Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 #Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 #Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 #Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 #Javascript
javascript模拟订火车票和退票示例
Apr 24 #Javascript
You might like
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python实时监控cpu小工具
2018/06/21 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python算法题 链表反转详解
2019/07/02 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
创新型城市实施方案
2014/03/06 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
Python读取和写入Excel数据
2022/04/20 Python