文章目录
- 前言
- 一、navigator是什么？
- 二、使用userAgent判断当前的设备型号，区分移动还是pc
- 1、判断ipad
- 2.判断移动
- 3、判断pc
- 总结
前言
在前端代码中，经常需要判断设备的类型，再来展示相对应的页面。也就是分为移动端和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端的方法就总结到这里，如果有什么不足，感谢各位朋友帮我补充！
