如何不使用视口尺寸或User Agent判断Web应用运行在桌面端还是移动端

可行解决方案 #

可以通过组合多维度特征判断，避开UA和媒体查询的缺陷，核心是判断设备是否为真实物理移动设备，而非桌面端模拟环境。

判断逻辑组合 #

• 先做基础UA筛查，排除明显的桌面端UA
• 新增触摸能力校验：真实移动设备的触摸点数量阈值和桌面端模拟有差异，判断navigator.maxTouchPoints是否大于等于2，桌面端Chrome模拟移动设备时该值大多为1，部分真实桌面触控设备该值为1的场景可以配合下一条逻辑排除
• 新增硬件特征校验：判断是否存在移动端独有的硬件API，比如window.orientation（仅移动端原生支持，桌面端模拟环境下该值恒为undefined或者固定值不会随设备旋转变化，也可以监听orientationchange事件是否能被触发来进一步验证）
• 可选新增交互特征校验：真实移动设备不会触发mouseenter这类仅桌面端鼠标才有的事件，首次加载后300ms内如果监听到该事件直接判定为桌面端环境

参考实现代码 #

function isRealMobileDevice() {
  // 基础UA筛查
  const ua = navigator.userAgent.toLowerCase();
  const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(ua);
  if (!isMobileUA) return false;
  
  // 触摸点校验
  if (navigator.maxTouchPoints < 2) return false;
  
  // orientation 校验
  if (window.orientation === undefined) return false;
  
  // 排除桌面端触控设备，比如带触控的笔记本
  const hasMobileOnlyAPI = 'ontouchstart' in window && 'ondevicemotion' in window;
  if (!hasMobileOnlyAPI) return false;
  
  return true;
}

// 存储逻辑
if (isRealMobileDevice()) {
  localStorage.setItem('yourKey', 'yourValue');
}

补充说明 #

• 该逻辑可以覆盖99%以上的真实移动设备场景，同时完全规避Chrome DevTools模拟移动设备的误判
• 如果你需要兼容iPad OS这类默认UA伪装成桌面端的移动设备，可以额外添加navigator.platform === 'iPad'或者判断苹果设备且屏幕尺寸符合iPad规格的逻辑做兼容
• 如果需要更高的判断精度，可以在用户首次交互时判断触摸事件的坐标精度，桌面端模拟的触摸事件坐标精度远低于真实移动设备的触摸输入

内容的提问来源于stack exchange，提问作者Hernán Cano