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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
React简单介绍
May 24 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
async/await地狱该如何避免详解
May 10 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 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
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
Javascript实现Web颜色值转换
2015/02/05 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Django重设Admin密码过程解析
2020/02/10 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
python中的列表和元组区别分析
2020/12/30 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
请说出以下代码输出什么
2013/08/30 面试题
创业资金计划书
2014/02/06 职场文书
优秀家长事迹材料
2014/05/17 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
小学教学工作总结2015
2015/05/13 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫