视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js如何判断用户是在PC端和还是移动端访问_javascript技巧
2020-11-27 21:22:11 责编:小采
文档


最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验。伴随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程序可以在不用的界面加载,是否引入这部分移动终端的判断代码。

具体实现:

我们把判断访问的脚本抽离,如果哪个页面需要进行客户终端的判断,我们就直接在页面使用引入脚本程序,具体判断代码如下:
代码如下:
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)
   {
   }
}

下载本文
显示全文
专题