如何用JavaScript检测设备是否具备屏幕旋转能力？

当然可以，下面是几个比纯UA检测更可靠的实现方案，专门解决你需要在可旋转设备横屏时显示提示的场景：

方案1：利用屏幕方向API直接判断 #

现代浏览器提供了window.screen.orientation接口，其中的supportedOrientations属性会返回设备支持的所有屏幕方向数组。如果数组长度大于1，说明设备可以切换屏幕方向。

function hasScreenRotationCapability() {
  // 先判断API是否存在
  if (!window.screen?.orientation) return false;
  // 支持至少两种方向则具备旋转能力
  return window.screen.orientation.supportedOrientations.length > 1;
}

这个方案最直接，兼容性覆盖绝大多数现代移动端浏览器，不过iOS Safari在部分旧版本中可能存在兼容性问题，主流版本已支持。

方案2：媒体查询+触摸特性组合判断 #

对于不支持上述API的旧设备，可以结合媒体查询和触摸检测来判断：

• 用媒体查询检测设备是否响应横竖屏状态
• 通过触摸特性区分移动设备（桌面设备即使支持横竖屏，通常也不需要旋转提示）

function hasScreenRotationCapability() {
  // 检测是否支持横竖屏媒体查询
  const supportsOrientation = window.matchMedia('(orientation: portrait)').media !== 'not all';
  // 判断是否为触摸设备
  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // 同时满足则认为具备旋转能力
  return supportsOrientation && isTouchDevice;
}

方案3：综合多维度判断（推荐） #

结合前面两种方案，再加入桌面设备排除逻辑，进一步提升准确性：

function hasScreenRotationCapability() {
  // 优先使用API判断
  if (window.screen?.orientation?.supportedOrientations) {
    return window.screen.orientation.supportedOrientations.length > 1;
  }
  // 降级方案
  const supportsOrientation = window.matchMedia('(orientation: portrait)').media !== 'not all';
  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // 排除大尺寸桌面设备（即使支持触摸，也不需要旋转提示）
  const isLargeDesktop = window.matchMedia('(min-width: 1024px)').matches;
  return supportsOrientation && isTouchDevice && !isLargeDesktop;
}

实际使用示例 #

在页面加载或屏幕方向变化时，调用判断函数来控制提示显示：

function toggleRotationPrompt() {
  const isLandscape = window.matchMedia('(orientation: landscape)').matches;
  const promptElement = document.getElementById('rotation-prompt');
  
  if (isLandscape && hasScreenRotationCapability()) {
    promptElement.style.display = 'block';
  } else {
    promptElement.style.display = 'none';
  }
}

// 绑定事件监听
window.addEventListener('load', toggleRotationPrompt);
window.addEventListener('orientationchange', toggleRotationPrompt);
window.addEventListener('resize', toggleRotationPrompt); // 兼容部分不触发orientationchange的设备

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