js如何判断用户是在PC端和还是移动端访问

 更新时间:2014年04月24日 16:05:56   作者:  
这篇文章主要介绍了js如何判断用户是在PC端和还是移动端访问,需要的朋友可以参考下
最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验。伴随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>}

相关文章

  • 详解iframe与frame的区别

    详解iframe与frame的区别

    Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性,通过本文给大家详解细节iframe与frame的区别,对iframe与frame的区别相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • DLL+ ActiveX控件+WEB页面调用例子

    DLL+ ActiveX控件+WEB页面调用例子

    因项目需要,开始学习并研究VC、DLL及ActiveX控件,网上资料找了很多,但没一个可用的或者说没一个例子可理解并运行的。没办法,自己研究吧。功夫不负有心人,终有小成了,呵呵,现在把自己学习总结了一下,献给需要的人。
    2010-08-08
  • 微信小程序之拖拽排序(代码分享)

    微信小程序之拖拽排序(代码分享)

    本篇文章主要分享了微信小程序拖拽排序的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 权威JavaScript 中的内存泄露模式

    权威JavaScript 中的内存泄露模式

    权威JavaScript 中的内存泄露模式...
    2007-08-08
  • uniapp App端使用高德地图超详细步骤

    uniapp App端使用高德地图超详细步骤

    地图现在已经渗入到生活的方方面面,给生活带了极大的编译,那么我们如何才能在项目中引入地图呢?这篇文章主要给大家介绍了关于uniapp App端使用高德地图超详细步骤的相关资料,需要的朋友可以参考下
    2023-11-11
  • 小程序中设置缓存过期的实现方法

    小程序中设置缓存过期的实现方法

    这篇文章主要介绍了小程序中设置缓存过期的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js 全世界最短的IE浏览器判断代码

    js 全世界最短的IE浏览器判断代码

    以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。
    2010-05-05
  • js变量作用域及可访问性的探讨

    js变量作用域及可访问性的探讨

    js变量作用域及可访问性的探讨...
    2006-11-11
  • javascript自动切换焦点控制效果完整实例

    javascript自动切换焦点控制效果完整实例

    这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
    2016-02-02
  • 原生js实现移动端瀑布流式代码示例

    原生js实现移动端瀑布流式代码示例

    这篇文章主要为大家分享了原生js实现移动端瀑布流式代码示例,对瀑布流布局感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论