JavaScript - 封装一个判断页面是在手机端还是在 PC 端打开的方法

Posted 2021-06-17 WHOVENLY

目录

• 一、原理介绍
• 二、方法封装

一、原理介绍

利用 JS 判断页面是在手机端还是在 PC 端打开，我们可以通过JS的Navigator对象，该对象包含有关浏览器的信息，带有许多属性和方法，其中userAgent 属性用于返回由客户机发送服务器的 user-agent 头部的值，通过这个值我们可以根据是否含有某些关键字去进行判断当前页面是在手机端还是在pc端。
例如：在windows电脑中

console.log(navigator.userAgent)

打印信息如下：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/90.0.4430.212 Safari/537.36

由上面的打印信息可知，有出现windows关键字，所以我们可以通过使用正则表达式去匹配关键字进行判断。

二、方法封装

function device() {
  var deviceName = navigator.userAgent.toLowerCase();
  if (/android|iPhone|webOS|iPod|BlackBerry/.test(deviceName)) {
    console.log("移动端");
  } else {
    console.log("pc端");
  }
}
device()

欢迎反馈文中表述不准确的地方或是不足之处~