CSS3出来后,我们一般都是通过@media媒体查询来实现网页自适应,但是有时候,还是需要我们根据不同的设备来对应的做不同的显示,这时候,我们需要知道当前用户访问我们的界面用的是什么设备,怎么获取呢?

var os = function (){
  var ua = navigator.userAgent,
  isWindowsPhone = /(?:Windows Phone)/.test(ua),
  isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
  isAndroid = /(?:Android)/.test(ua),
  isFireFox = /(?:Firefox)/.test(ua),
  isChrome = /(?:Chrome|CriOS)/.test(ua),
  isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
  isPhone = /(?:iPhone)/.test(ua) && !isTablet,
  isPc = !isPhone && !isAndroid && !isSymbian;
  return {
    isTablet: isTablet,
    isPhone: isPhone,
    isAndroid: isAndroid,
    isPc: isPc
  };
}();
if (os.isAndroid || os.isPhone) {

  alert("phone" );

} else if (os.isTablet) {

  alert("pad" );

} else if (os.isPc) {

   alert("pc")
}

JS判断当前设备类型的更多相关文章

  1. JS判断设备的类型

    利用JS判断浏览器的用户代理,从而获得设备类型.利用这个方法可以获得用户的设备是移动设备还是PC设备.     JS代码如下:       function browerType() {       ...

  2. js判断设备(转)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js判断本机是否已安装app

    需求:在浏览器或者app webview中打开的页面,js判断本机是否已安装搜狐新闻客户端. 一.微信 1.分享——好友/朋友圈,feed会有搜狐新闻标记,打开url后缀参数isappinstalle ...

  4. js判断网页是否加载完毕 包括图片

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

  5. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  6. JS判断网页是否在微信中打开/

    JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...

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

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

  8. js判断undefined类型

    js判断undefined类型 if (reValue== undefined){    alert("undefined");    }  发现判断不出来,最后查了下资料要用ty ...

  9. js判断只能输入数字和只能输入

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

随机推荐

  1. 漫说996icu黑名单

    以实际行动声援996icu项目. https://github.com/996icu/996.ICU/blob/master/blacklist/blacklist.md 996公司黑名单,京东,华为 ...

  2. MSSQL中 数值类型转换为千分号的解决方案

    转自:http://www.maomao365.com/?p=4797 前言:最近需要将报表中关于数值部分的数据,采用千分号的形式展现给用户,下面将讲解如何制作1 将数值类型转换为 money类型2 ...

  3. c#核心基础--类的构造方法

    一.构造方法 类的构造方法是类的成员方法的一种,它的作用是对类中的成员进行初始化操作.类的构造方法分为: 1.静态构造方法 2.实例构造方法 3.私有构造方法 1.静态构造方法 类的静态构造方法是类的 ...

  4. Timeout occurred while waiting for latch: class 'ACCESS_METHODS_DATASET_PARENT'

    前些天某个SQL Server数据库的错误日志爆出如下错误: Timeout occurred while waiting for latch: class 'ACCESS_METHODS_DATAS ...

  5. Servlet(三):获取表单数据、解决乱码和报错问题

    在了解了servlet的生命周期以及运行过程后,再来动手写一个小例子,加深对servlet的理解. 一.需求说明 在用户注册信息页面,输入用户名.密码.性别.邮箱等一些信息后,页面返回刚刚填写的信息. ...

  6. May 30. 2018 Week 22nd Wednesday

    Never forget to say "Thanks." 永远不要忘记说谢谢. Don't take anything we get for granted, and never ...

  7. Ajax请求中的async:false/true的作用[转]

    test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...

  8. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  9. ElasticSearch(二):允许外网连接服务配置

    上一篇文章的配置,只能在本机使用,但是要想为集群或者其他的机器连接,则需要做以下配置: 一.修改/opt/elasticsearch-6.4.0/config/elasticsearch.yml文件 ...

  10. Python之requests库

    Request库 r = requests.get(url) 这个包括两个语句:Response.Request,我们重点来看一下Response Response包含了页面返回的所有信息,下面是它的 ...