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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 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
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
实例解析php的数据类型
2018/10/24 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
python3中zip()函数使用详解
2018/06/29 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
.NET常见笔试题集
2012/12/01 面试题
国际贸易专业推荐信
2013/11/15 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
经济担保书范文
2014/04/02 职场文书
一岗双责责任书
2014/04/15 职场文书
产品质量保证书
2014/04/29 职场文书
投标保密承诺书
2014/05/19 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript