如何用 JavaScript 检测网站是在移动设备上打开还是在桌面上打开？

在今天越来越多的人使用移动设备浏览网页的情况下，知道如何检测网站是在移动设备上打开还是在桌面上打开可以帮助我们优化移动设备和桌面浏览器的不同需求。在本文中，我们将介绍一些方法来检测网站是在移动设备上打开还是在桌面上打开。

方法一：使用媒体查询

媒体查询是CSS3的一个模块，可以用来检测屏幕大小，从而根据不同的屏幕大小应用不同的样式。我们可以通过媒体查询来检测网站是在移动设备上打开还是在桌面上打开。

@media only screen and (max-width: 600px) {
  /* 移动设备 */
}

@media only screen and (min-width: 600px) {
  /* 桌面浏览器 */
}

在上面的代码中，我们在媒体查询中使用 max-width 属性来检测屏幕宽度是否小于等于600像素，如果是，就认为是移动设备，否则就认为是桌面浏览器。

方法二：使用navigator.userAgent

navigator.userAgent 属性可以返回用户代理头的字符串，该字符串包含了浏览器的类型、版本、操作系统以及其他的信息。我们可以通过检测 navigator.userAgent 字符串来判断是移动设备还是桌面浏览器。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
  console.log("移动设备");
} else {
  console.log("桌面浏览器");
}

在上面的代码中，我们使用正则表达式检测 navigator.userAgent 字符串中是否包含某些关键字（如 iPhone），如果包含，则认为是移动设备，否则就认为是桌面浏览器。

方法三：使用window.orientation

window.orientation 属性可以返回设备的方向信息。在移动设备上，可以通过检测 window.orientation 属性的值来判断是移动设备还是桌面浏览器。

const isMobile = typeof window.orientation !== "undefined";

if (isMobile) {
  console.log("移动设备");
} else {
  console.log("桌面浏览器");
}

在上面的代码中，我们检测 window.orientation 属性是否存在，如果存在，则认为是移动设备，否则就认为是桌面浏览器。

结论

以上我们介绍了三种方法来检测网站是在移动设备上打开还是在桌面上打开。这些方法都有一些优劣，具体使用哪种方法取决于你自己的需求。