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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
js document.write()使用介绍
Feb 21 Javascript
jquery操作select大全
Apr 25 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
python安装pywin32clipboard的操作方法
2019/01/24 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
2014年元旦活动方案
2014/02/15 职场文书
财务管理专业自荐书
2014/09/02 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年民警工作总结
2014/11/25 职场文书
公司会议开幕词
2016/03/03 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
python数字图像处理:图像简单滤波
2022/06/28 Python