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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
iView框架问题整理小结
Oct 16 Javascript
vue实现分页组件
Jun 16 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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实现var_export的详细介绍
2013/06/20 PHP
php中apc缓存使用示例
2013/12/25 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
学习python (1)
2006/10/31 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python类的继承和多态代码详解
2017/12/27 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对numpy中shape的深入理解
2018/06/15 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
SQL面试题
2013/04/30 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
小学社团活动总结
2014/06/27 职场文书
国防教育标语
2014/10/08 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
家长会欢迎词
2015/01/23 职场文书
清明节寄语2015
2015/03/23 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书