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 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JavaScript实现音乐导航效果
Nov 19 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
用JS实现的一个include函数
2007/07/21 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python中常用信号signal类型实例
2018/01/25 Python
tensorflow多维张量计算实例
2020/02/11 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android