zoukankan      html  css  js  c++  java
  • js如何判断用户是在pc端和还是移动端访问

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

    来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页
    最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验。伴随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>} 
  • 相关阅读:
    2019-2020-1 20175301 20175305 20175318 实验三 实时系统
    2019-2020-2-20175301 20175305 20175318-实验二固件程序设计
    2019-2020-1 20175301 20175305 20175318 实验一 开发环境的熟悉
    2019-2020-1 20175305 《信息安全系统设计基础》第4周学习总结
    20175305 《信息安全系统设计基础》第1-2周学习总结
    2018-2019-2 20175305 实验五《网络编程与安全》实验报告
    2018-2019-2 20175305实验四《Android程序设计》实验报告
    20175305张天钰《java程序设计》第十一周学习总结
    使用 JDK11 遇到的问题
    Oracle 从 dual 表中查询返回多行记录
  • 原文地址:https://www.cnblogs.com/timssd/p/10153011.html
Copyright © 2011-2022 走看看