在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别。于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们就简单点来说,以我们公司的官网来说,PC端和移动端的官网界面分别如下:

   Navigator对象

  首先来了解一下Navigator 对象,Navigator 对象包含有关浏览器的信息,下面的userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。所以我们可以通过判断navigator.useragent里面是否有某些值来判断,比如我的电脑是mac,所以打印出来的值为

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

具体含义不解释,有兴趣同学自行百度,可以看到里面含有 Mac 字样,其他的也是类似的。

  那如何判断页面是在移动端还是PC端打开的呢?

  网上有很多方法,写的或难或简单,实际上一行代码就够了

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" :  "http://news.baidu.com/";

  

以上代码利用了正则表达式三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.baidu.com/" ,如果不是就跳转到"http://new.baidu.com/",这个看不懂的话,那我下面这样写就很容易理解了吧

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://www.baidu.com/";
} else {
window.location.href = "http://news.baidu.com/";
}

  什么?if里面的判断还是看不懂?实际上就是利用正则去判断 navigator.useragent 是否含有 Android/webOs/iphone 等字符串,并且利用修饰符 "i" 做了不区分大小写,然后用正则的方法 test 去判断是否满足,如果这种方式不理解的话完全可以利用字符串的 indexOf 方法去判断。

  OK,就说这么多咯!祝工作顺利!

简单的利用JS来判断页面是在手机端还是在PC端打开的方法的更多相关文章

  1. 仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a419419/article/detail ...

  2. 用JavaScript判断网站是在手机端还是在PC端打开的方法

    我们可以在网站的首页加上一段JavaScript代码对用户的浏览器进行判断,从而显示不同的网址,代码如下: <script type="text/javascript"> ...

  3. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  4. 转:HTML5页面如何在手机端浏览器调用相机、相册功能

    HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...

  5. 判断页面是在pc端打开还是在移动端打开

    在项目开发中会遇到在不同的设备中打开页面是不同的,比如: 我在手机中打开一个网站和pc打开一个网站,页面是不同的 具体实施如下 //判断打开网站的终端 var ua = window.navigato ...

  6. js判断当前页面在移动设备还是在PC端中打开

    方法一: var isPC = function () { var userAgentInfo = navigator.userAgent.toLowerCase(); var Agents = ne ...

  7. 利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换

    我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一 ...

  8. 那如何判断页面是在移动端还是PC端打开的

    网上有很多方法,写的或难或简单,实际上一行代码就够了. window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navi ...

  9. 利用js刷新页面方法

    1,reload 方法,该方法强迫浏览器刷新当前页面. location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-S ...

随机推荐

  1. php 与redis 结合 使用predis

    分为2步骤 1.下载predis 2.使用predis,让php与redis进行通信 <?php require('autoload.php'); $redis = new Predis\Cli ...

  2. input解决浏览器记住密码问题

    <input type="password" name="" id="">可以这样写 <input type=" ...

  3. 2017,科学使用strace神器(附代码,举栗子)

    我感到惊讶,都2017年了,几乎没有人知道他们可以使用strace的了解所有事情.它总是我拔出的第一个调试工具之一,因为它通常在我运行的Linux系统上可用,并且它可以用于解决各种各样的问题. 什么是 ...

  4. (七)javascript中的数组

    一. 一维数组 1.1 声明数组 var 数组名=new Array(数组大小); 1.2  添加元素 <script> var a=new Array(3); a[0]="张三 ...

  5. KoaHub平台基于Node.js开发的Koa的简单包装到请求库的类似接口

    co-request co-request promisify wrapper for request co-request Simple wrapper to the request library ...

  6. <context:property-placeholder/>元素

    <context:property-placeholder/>元素 PropertyPlaceholderConfigurer实现了BeanFactoryPostProcessor接口,它 ...

  7. Mac 上的 outlook 一直让输入密码

    Mac 上的 outlook 即便输入了正确的密码,依然提示密码错误,让重新输入,需要输入多遍之后才能连上服务器. 出现这个问题的原因可能是证书过期了. 解决方式如下: 1.找到 2. 删掉 Exch ...

  8. 【iOS】7.4 定位服务->2.1.3.1 定位 - 官方框架CoreLocation 功能1:地理定位

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  9. Asp.Net MVC4中的全局过滤器,

    可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码:  FilterConfig.RegisterGlobalFilters(GlobalFilters ...

  10. C++数据

    const :常量 ~x == -++x == -(x+1)   二进制数,1变为0,0变为1 ^                               相同为0,不同为1 &      ...