嘿，我来帮你捋捋你代码里的问题，以及怎么改成靠谱的检测逻辑～

首先说你为啥会遇到那些奇怪的情况：

• 只靠'onXXX' in window判断太片面：很多桌面浏览器或者部分平板，会在window上挂着ondevicemotion/ondeviceorientation这些属性，但实际上设备根本没装对应的传感器，甚至有些系统（比如iOS 13+）还需要用户手动授权才能访问这些数据，这直接导致你的判断失效。
• 没做超时兜底：比如你笔记本上，虽然ondevicemotion可能存在，但没有传感器，事件永远不会触发，你的代码就一直卡在“Loading...”，根本不会走到“Not supported”的分支。
• 状态逻辑冲突：你那两个独立的if判断，比如平板上如果ondeviceorientation属性其实存在但传感器不工作，那第一个判断就不会触发“Orientation not supported”，而后面的devicemotion监听又没拿到数据，自然就一直显示Loading了。

给你一套更实用的实现思路：监听事件+超时判断，既要检查事件是否存在，还要验证实际返回的数据是否有效，同时加个超时兜底，避免一直卡加载。直接上代码：

// 先获取页面元素
const statusText = document.getElementById("support-status-text");
const yAccelText = document.getElementById("y-acceleration-text");

// 标记两种传感器是否获取到有效数据
let hasValidMotion = false;
let hasValidOrientation = false;

// 超时检测时间，3秒足够大部分设备返回数据了，可按需调整
const DETECT_TIMEOUT = 3000;

// 数字格式化工具函数
function roundToFixed(value) {
  return value == null ? value : value.toFixed(2);
}

// 处理devicemotion事件，只有拿到有效加速度数据才算支持
function handleMotion(event) {
  if (event.acceleration?.y != null) {
    hasValidMotion = true;
    yAccelText.textContent = roundToFixed(event.acceleration.y);
    updateStatus();
    // 拿到有效数据后就移除监听，省资源
    window.removeEventListener('devicemotion', handleMotion);
  }
}

// 处理deviceorientation事件，有效方向数据需要alpha/beta/gamma都存在
function handleOrientation(event) {
  if (event.alpha != null && event.beta != null && event.gamma != null) {
    hasValidOrientation = true;
    updateStatus();
    window.removeEventListener('deviceorientation', handleOrientation);
  }
}

// 更新页面显示的支持状态
function updateStatus() {
  const statusItems = [];
  statusItems.push(hasValidMotion ? "运动传感器（devicemotion）已支持" : "运动传感器（devicemotion）不支持");
  statusItems.push(hasValidOrientation ? "方向传感器（deviceorientation）已支持" : "方向传感器（deviceorientation）不支持");
  statusText.textContent = statusItems.join(" | ");
}

// 初始化检测流程
function initDetection() {
  // 先尝试添加事件监听
  if ('ondevicemotion' in window) {
    window.addEventListener('devicemotion', handleMotion);
  } else {
    // 连事件属性都没有，直接标记为不支持
    hasValidMotion = false;
  }

  if ('ondeviceorientation' in window) {
    window.addEventListener('deviceorientation', handleOrientation);
  } else {
    hasValidOrientation = false;
  }

  // 超时兜底：如果到点还没拿到有效数据，就判定为不支持
  setTimeout(() => {
    // 没拿到数据就标记为不支持
    if (!hasValidMotion) hasValidMotion = false;
    if (!hasValidOrientation) hasValidOrientation = false;
    updateStatus();
    // 清理监听，避免占资源
    window.removeEventListener('devicemotion', handleMotion);
    window.removeEventListener('deviceorientation', handleOrientation);
  }, DETECT_TIMEOUT);
}

// 启动检测
initDetection();

HTML部分还是你原来的：

<div id="container">
  <p id="support-status-text">Loading...</p>
  <p id="y-acceleration-text">nothing</p>
</div>

这个方案的好处：

1. 双重验证：既检查事件是否存在，又验证返回数据的有效性，不会被浏览器的假属性坑。
2. 超时兜底：不管是没传感器还是用户拒了权限，超时后都会自动更新状态，不会一直卡Loading。
3. 状态清晰：分开显示两种传感器的支持情况，像你平板那种“有运动无方向”的场景，能准确显示出来。
4. 资源友好：拿到数据或者超时后都会移除监听，不浪费设备资源。

另外提一句：iOS设备需要用户手动授权访问运动数据，页面会弹出授权提示，用户允许后才会触发事件，这个方案也能完美适配这种情况～

备注：内容来源于stack exchange，提问作者Mammoth-Winner-1579