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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
Openlayers实现图形绘制
Sep 28 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python脚本和网页有何区别
2020/07/02 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
办公室主任职责范本
2014/03/07 职场文书
《四季》教学反思
2014/04/08 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
团队拓展训练感想
2015/08/07 职场文书