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>} 

js如何判断用户是在pc端和还是移动端访问的更多相关文章

  1. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  2. js如何判断用户使用的设备类型及平台

    前端开发经常遇到需要判断用户的浏览设备,是pc端还是移动端,移动端使用的是什么手机系统?android.ios.ipad.windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是 ...

  3. js 怎样判断用户是否在浏览当前页面

    有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态.然后再进行相关的操作.浏览器中可通过window对象的onblur.onfocus判断,或者document的hidd ...

  4. 关于实现判断用户是在PC端和还是移动端访问。

    最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终 ...

  5. 前端判断用户请求是PC还是移动端

    链接:https://www.zhihu.com/question/20004700/answer/13678113 第一步先在服务器端使用User Agent判断,先匹配出移动设备,这一步可以统计U ...

  6. js判断用户浏览器是PC还是手机,自动跳转

    browserRedirect(); function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); ...

  7. js 各类判断用户输入字符的格式函数

    1.JS 判断IP格式是否正确: function checkIP(ip) { var regular = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;//正则表达式 if (reg ...

  8. 用JS判断用户使用的是手机端还是pc端访问

    最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...

  9. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

随机推荐

  1. Spark streaming的正确使用。。

    转自http://bit1129.iteye.com/blog/2198531 代码如下: package spark.examples.streaming import java.sql.{Prep ...

  2. 004 @PathVariable映射URL绑定的占位符

    一: 1.介绍 带占位符的URL是spring 3.0新增的功能,是向REST发展的重要阶段. @PathVariable可以将URL中占位符参数绑定到控制器处理的方法的入参中:URL中的{xxx}占 ...

  3. 026 Spark 的官网(版本为1.6.1的总官网)

    1. 多多读官网,所有的只知识点都可以从上面的总纲中查到.

  4. python selenium-webdriver 环境搭建(一)

    selenium 虽然过了这么多年,但是到目前为止依然是比较流行的自动化框架了,还有很多的初学者在学习,所以根据自己的时间将把相关的资料汇总一下,下面首先我们需要搭建一下基础环境. 首先自己本身比较笨 ...

  5. word2013 如何设置从第三页开始编码 或 如何设置封面页和正文页页码不连续

    首先说明一下 “分节符”作用,它就是用来将整个文档分节的,添加一个分节符,文档就分成1.2两节:添加两个分节符,文档就分成1.2.3节. 当前页面具体是第几节,可以通过点击页眉页脚来查看: 从第三页开 ...

  6. RN Android全面屏适配

    像现在市面上新出的手机,例如华为P30 pro,小米9,iPhone XS MAX,屏占比都惊人的达到90%以上,这些手机具备了以下几个特点 大,屏占比高,长宽比都不再是16:9,都达到了19.5:9 ...

  7. Java 类的继承详解

    /*文章中用到的代码只是一部分,需要完整代码的可通过邮箱联系我1978702969@qq.com*/ 在面向对象的语言中如C++和JAVA,都有一个比较重要的机制——类的继承.这里将对JAVA中的类的 ...

  8. java string 替换img标签 正则表达式 任意多个字符

    正则表达式 任意多个字符 (.*)  正则表达式中,“.”(点符号)匹配的是除了换行符“\n”以外的所有字符 要匹配包括 '\n' 在内的任何字符,([\s\S]*) 也可以用 “([\d\D]*)” ...

  9. Scanner和BufferedReader的区别和用法

    在命令行模式下要输入数据至程序中时,我们可以使用标准输入串对象System.in.但是,我们并不经常直接使用它,因为System.in提供的 read方法每次只能读取一个字节的数据,而我们平时所应用的 ...

  10. [BZOJ3757]苹果树(树上莫队)

    树上莫队共有三种写法: 1.按DFS序列分块,和普通莫队类似.常数大,不会被卡. 2.按块状树的方式分块.常数小,会被菊花图卡到O(n). 3.按[BZOJ1086]王室联邦的方式分块.常数小,不会被 ...