如何不使用CSS通过JavaScript判断网站是否在移动设备打开？

你要的是区分设备本身，而非当前浏览器窗口的尺寸，之前用window.innerWidth或普通max-width媒体查询会被窗口缩放干扰，核心是要针对设备固有属性来判断。下面是几种纯JS实现方案：

1. 利用window.matchMedia结合设备媒体查询 #

这是最推荐的方式，本质还是用媒体查询，但指定针对设备而非窗口，完全不需要依赖CSS文件：

// 匹配设备屏幕宽度小于768px的移动设备
const isMobile = window.matchMedia('(max-device-width: 767px)').matches;

if (isMobile) {
  // 执行移动端逻辑
  console.log('当前是移动设备');
} else {
  // 桌面端逻辑
  console.log('当前是桌面设备');
}

max-device-width对应的是设备的物理屏幕宽度，不会随浏览器窗口缩放改变，完美解决你提到的电脑窗口缩放误判问题。如果需要监听设备状态变化（比如平板旋转），还可以添加监听：

const mediaQuery = window.matchMedia('(max-device-width: 767px)');
mediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    // 切换到移动端逻辑
  } else {
    // 切换到桌面端逻辑
  }
});

2. 通过设备屏幕固有尺寸判断 #

直接读取window.screen对象的属性，这是设备的物理屏幕参数，不受窗口缩放影响：

// 设备屏幕宽度小于768px判定为移动设备
const isMobile = screen.width < 768;

if (isMobile) {
  // 移动端逻辑
}

注意：部分平板设备的屏幕宽度可能超过768px，若需区分平板和手机，可以结合devicePixelRatio或UA进一步判断。

3. 解析User Agent（UA）字符串 #

通过识别UA里的移动设备关键词判断，适合对设备类型有更细分需求的场景：

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

if (isMobileDevice()) {
  // 移动设备逻辑
}

缺点：UA可以被伪造，部分新设备的UA可能未覆盖，但日常使用足够。

内容的提问来源于stack exchange，提问作者Axel G