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 应用代码 方便的排序功能
Feb 06 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
openLayer4实现动态改变标注图标
Aug 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
第六节--访问属性和方法
2006/11/16 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
获取body标签的两种方法
2011/10/13 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
英语简历自我评价
2014/01/26 职场文书
服装设计专业自荐信
2014/06/17 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
休假证明书
2015/06/24 职场文书
给领导敬酒词
2015/08/12 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Flask response响应的具体使用
2021/07/15 Python