【js判断移动端和pc端】【js判断是否是ipad(兼容ios13)】

发布时间:2023年12月26日


前言

在前端代码中,经常需要判断设备的类型,再来展示相对应的页面。也就是分为移动端和PC端。
js中可以使用navigator.userAgent来输出当前设备的详细信息。


一、navigator是什么?

navigator是js的一个对象,用于提供当前浏览器及操作系统等信息,这些信息都放在navigator的各个属性中。navigator对象也是window对象的成员。

JavaScript navigator 对象中存储了与浏览器相关的信息,例如名称、版本等,我们可以通过 window 对象的 navigator 属性(即 window.navigator)来引用 navigator 对象,并通过它来获取浏览器的基本信息。

在控制台输出,如下图:
在这里插入图片描述
属性如下:

appCodeName 获取浏览器的内部代码名。
appMinorVersion 获取浏览器的辅版本号,常用于浏览器的补丁货服务包。
appName 获取浏览器的名称。
appVersion 获取浏览器的平台和版本信息。
language 获取当前浏览器的语言,例如,可能的一个结果是“zh-CN”。
userAgent 返回浏览器的厂商和版本信息,即浏览器运行的操作系统、浏览器的版本、名称
cookieEnabled 获取浏览器中是否启用 cookie 的布尔值。
oscpu 获取计算机系统的 CPU 型号,例如,Inter通常得到的结果是x86。
onLine 获取浏览器是否连接互联网,结果是布尔值。
platform 获取运行浏览器的操作系统平台。
mimeTypes 获取浏览器支持的所有的MIME类型的数组。
plugins 获取安装在浏览器上的所有插件的数组。
product 获取浏览器的产品名,例如,可能的结果是Gecko。
productSub 获取浏览器产品的更多信息,例如,可能的结果是20030107。
vendor 获取浏览器的厂商名称,例如,可能的结果是Google Inc.。
vendorSub 获取浏览器的厂商更多信息。

二、使用userAgent判断当前的设备型号,区分移动还是pc

1、判断ipad

代码如下(示例):

function isIpadFun() {
  var ua = window.navigator.userAgent
  var IsIPad = false
  if (/ipad/i.test(ua)) {
    IsIPad = true
  }
  // iPad from IOS13
  var macApp = ua.match(/Macintosh/i) != null
  if (macApp) {
    // need to distinguish between Macbook and iPad
    var canvas = document.createElement('canvas')
    if (canvas != null) {
      var context =
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
      if (context) {
        var info = context.getExtension('WEBGL_debug_renderer_info')
        if (info) {
          var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL)
          if (renderer.indexOf('Apple') != -1) IsIPad = true
        }
      }
    }
  }
  return IsIPad;
}

2.判断移动

代码如下(示例):

function isMobileDevice() {
  return navigator.userAgent.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  );
}

3、判断pc

if (isMobileDevice() || isIpadFun()) {
	// 是移动端
} else {
    // 是pc端
}

总结

那么,JS怎样判断设备型号,怎样区分移动端还是PC端的方法就总结到这里,如果有什么不足,感谢各位朋友帮我补充!

文章来源:https://blog.csdn.net/Min_Fox/article/details/135225990
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。