H5案例分享:使用JS判断客户端、浏览器、操作系统类型

时间:2023-01-25 08:41:51

H5案例分享:使用JS判断客户端、浏览器、操作系统类型

使用JS判断客户端、浏览器、操作系统类型

一、JS判断客户端类型

JS判断客户端是否是iOS或者Android手机移动端

通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端。

核心代码如下:

方法一:

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
  alert('这是Android');
}
if (isiOS) {
  alert('这是IOS');
}

扫码体验:

H5案例分享:使用JS判断客户端、浏览器、操作系统类型

方法二:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('这是IOS');
} else if (/(Android)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('这是Android');
} else {
  alert('这是PC');
};

扫码体验:

H5案例分享:使用JS判断客户端、浏览器、操作系统类型

二、JS检测是否在微信打开

使用js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,那么我们也可以通过该方法来获取微信内置浏览器的相关信息。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。

核心代码如下:

function is_weixn(){
  var ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i)=='micromessenger') {
    alert('在微信里打开');
  } else {
     alert('不在微信里打开');
  }
}
is_weixn();

扫码体验:

H5案例分享:使用JS判断客户端、浏览器、操作系统类型

三、JS判断操作系统类型

在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows下浏览效果良好,但是到了Linux下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验。这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验。

下边是对Windows、Mac、Linux、Unix擦作系统进行判断的JS核心代码:

function detectOS() {
  var sUserAgent = navigator.userAgent;
  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
  if (isMac) return "Mac";
  var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
  if (isUnix) return "Unix";
  var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
  if (isLinux) return "Linux";
  if (isWin) {
    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 ||sUserAgent.indexOf("Windows 2000") > -1;
    if (isWin2K) return "Win2000";
    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
    if (isWinXP) return "WinXP";
    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
    if (isWin2003) return "Win2003";
    var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
    if (isWinVista) return "WinVista";
    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
    if (isWin7) return "Win7";
  }
   return "other";
}

alert("您的操作系统是:" + detectOS());

H5案例分享:使用JS判断客户端、浏览器、操作系统类型的更多相关文章

  1. 通过JS判断当前浏览器的类型

    通过JS判断当前浏览器的类型,对主流浏览器Chrome.Edge.Firefox.UC浏览器.QQ浏览器.360浏览器.搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器. 不同浏览器的 ...

  2. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

  3. H5案例分享:JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  4. js 判断客户端浏览器

    var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { ...

  5. js判断当前浏览器语言类型

    console.log(window.navigator.language.slice(0, 2)); 得到的是zh

  6. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  7. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  8. 使用JS判断客户端、浏览器、操作系统类型

    一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 核心代码如下: 方法一: &l ...

  9. JS判断客户端是否是iOS或者Android或者ipad(三)

     *  * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器  * @return: true或false  *  */ function isSafa ...

随机推荐

  1. MVC、ORM、CURD、ActiveRecord、单一入口的概念

    MVC MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V).控制器(C),它们各自处理自己的任务. 视图 :视图是用户看到并 ...

  2. MyBatis知多少(4)MyBatis的优势

    MyBatis是一个混合型解决方案.它汲取了所有这些解决方案中最有价值的思想并将它们融会贯通.下表总结了MyBatis从我们之前讨论的那些方案中所汲取的思想. 方 案 相同的优点 解决的问题 存储过程 ...

  3. Redefining already defined constructor

    报错:Strict standards: Redefining already defined constructor for class SplitWord in D:\wamp\www\wsc\i ...

  4. 玩耍Hibernate系列(二)--基础知识

    Hibernate思维导图   Hibernate映射 关于hibernate的映射要说明的一点就是关于ID的访问权限,peroperty以及field的区别: 表的主键在内存中对应一个OID对象描述 ...

  5. EnterpriseArchitectect 软件的勾选的几个选项对应的中文意思

    Business Process 业务流程 Requirements 需求分析 Use Case 用例 Domain Model 领域模型 Class 类 Database 数据库设计 Compone ...

  6. SKPhysicsJointFixed类

    继承自 NSObject 符合 NSCoding(SKPhysicsJoint)NSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit. ...

  7. [译]Stairway to Integration Services Level 10 - 高级事件活动

    介绍 在前一篇文章中我们介绍了故障容差相关的 MaximumErrorCount 和 ForceExecutionResult 属性.  同时我们学习了SSIS Control Flow task e ...

  8. ubuntu16.04配置anaconda环境

    0 - 下载安装包 推荐到清华镜像下载.我选择的是Anaconda3-5.1.0-Linux-x86_64.sh. 1 - 安装Anaconda 然后切换到安装包目录,执行下面命令,期间一直按回车或者 ...

  9. date命令以及date -d使用

    date -d '2 days ago' //显示2天前的时间,2019年 02月 10日 星期日 08:53:28 CST date -d "2 days ago" +%Y%m% ...

  10. Flask蓝图

    它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看客户列表的功能,后来你又加入了一个添加客户的功能(add_user)模块, 然后又加入了一个 ...