在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别。于是就遇到一个问题,如何判断你的页面是在移动端还是在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. [hihoCoder]1014 Trie水题

    最最最最最最最基本的Trie词频统计应用了. package trie; import java.util.Scanner; public class Main { public static voi ...

  2. 求int型正整数在内存中存储时1的个数

    题目描述: 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 输入例子: 5 输出例子: ...

  3. 1011: [HNOI2008]遥远的行星

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 2241  Solved ...

  4. Jaro-Winkler Distance

    发现commons-lang 中有实现: StringUtils.class public static double getJaroWinklerDistance(final CharSequenc ...

  5. Freemaker配置文件详解

    classic_compatible=true              ##如果变量为null,转化为空字符串,比如做比较的时候按照空字符做比较 whitespace_stripping=true  ...

  6. 【微信公众平台SDK(链式调用)】经过半个月的迭代,今天抽空写了个Demo

    这个项目是在实际开发中逐渐完善的,开发过程基于ASP.Net Core 1.1,实际生成会兼容Net4.5. 写有完善的代码提示,怎么用就不多做解释了,引用好实例中的命名空间基本上就可以通过智能提示了 ...

  7. mac 下 wget 安装

    1.下载 wget 压缩包,wget 下载地址:ftp://ftp.gnu.org/gnu/wget/ 2.make && make install 3.如果提示 permission ...

  8. Spark(开课吧笔记)

    2016.07.14 1-Spark实战演练:Spark概述及生态环境 2.Spark实战演练:Spark vs Hadoop MapReduce     任意一条边有方向且不存在环路的图,一次执行所 ...

  9. js中关于string的一些常用的方法

    最近总结了一些关于string中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. ...

  10. jmeter分布式压测

    stop.sh需要跑Jmeter的服务器上安装Jmeteryum install lrzsz 安装rz.sz命令rz jemter的压缩包 拷贝到/usr/local/tools下面unzip apa ...