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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
原生js实现表格翻页和跳转
Sep 29 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遍历目录viewDir函数
2009/12/15 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
九年级语文教学反思
2014/02/04 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
python神经网络ResNet50模型
2022/05/06 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python