📌  相关文章
📜  检测设备是 iOS 还是不使用 JavaScript(1)

📅  最后修改于: 2023-12-03 15:26:50.433000             🧑  作者: Mango

检测设备是 iOS 还是不使用 JavaScript

简介

在某些情况下，我们需要检测用户所使用的设备是何种类型，例如我们需要提供不同的下载链接，或者是展示不同的页面。本文将会介绍如何检测设备类型，并返回一个布尔值，以便我们进行后续的处理。

不使用 JavaScript

在不使用 JavaScript 的情况下，我们可以通过检测 User Agent 来确定用户的设备类型。例如，以下是 iOS、安卓和 Desktop 设备的 User Agent 示例：

  • iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
  • 安卓: Mozilla/5.0 (Linux; Android 11; Pixel 4 XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36
  • Desktop: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36

我们可以通过比对 User Agent 中的关键词来确定用户所使用的设备类型。例如，以下代码片段可以检测是否为 iOS 设备：

<!DOCTYPE html>
<html>
  <head>
    <title>Detect iOS device without JavaScript</title>
  </head>
  <body>
    <script>
      var iPadAgent = navigator.userAgent.match(/iPad/i) != null;
      var iPhoneAgent = navigator.userAgent.match(/iPhone/i) != null;
      var iPodAgent = navigator.userAgent.match(/iPod/i) != null;
      var iOSAgent = iPadAgent || iPhoneAgent || iPodAgent;
      var isIOS = iOSAgent;
      var isNotIOS = !iOSAgent;
      console.log("Is iOS: " + isIOS);
      console.log("Is not iOS: " + isNotIOS);
    </script>
  </body>
</html>
使用 JavaScript

如果我们允许使用 JavaScript 的话，我们可以使用以下代码片段来检测设备类型：

<!DOCTYPE html>
<html>
  <head>
    <title>Detect iOS device with JavaScript</title>
  </head>
  <body>
    <script>
      var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      var isNotIOS = !isIOS;
      console.log("Is iOS: " + isIOS);
      console.log("Is not iOS: " + isNotIOS);
    </script>
  </body>
</html>

这里我们使用了正则表达式来检测 User Agent 中是否包含 iPad、iPhone 或者 iPod 字符串，并且在不是在 Microsoft 浏览器中执行（Microsoft 浏览器会将 User Agent 模拟为 Safari）。

结论

无论使用何种方法，检测设备类型都不是 100% 可靠的，因为用户可以自由更改其 User Agent 字符串。但这些方法可以在大多数情况下正常工作，如果您需要更准确的检测方式，可以考虑使用第三方库或服务。