上传至FTP后DeviceOrientation事件失效，本地及Chrome模拟器正常

问题分析与解决方案 #

这个问题我之前也踩过坑！核心原因是现代浏览器的安全政策限制：DeviceOrientationEvent这类传感器API只能在**安全上下文（Secure Context）**中运行。

为什么本地和模拟器能正常工作？ #

• 本地打开的HTML文件用的是file://协议，浏览器默认把本地文件环境视为安全的，所以不会限制传感器API；
• Chrome模拟器是浏览器内置的调试环境，同样被豁免了安全限制，所以测试时功能正常。

为什么FTP服务器上不行？ #

FTP服务器提供的页面用的是ftp://协议，这个协议不属于安全上下文范畴，浏览器会直接禁用DeviceOrientationEvent这类需要权限的API，导致你的代码无法触发事件。

解决办法 #

1. 切换到HTTPS服务器（推荐，生产环境必须）
   只要你的页面通过https://协议访问，就满足安全上下文要求，传感器API就能正常运行。现在大部分云服务器或主机服务商都提供免费的SSL证书，配置起来很方便。

2. 临时解除Chrome的安全限制（仅用于开发测试）
   如果你只是想临时在FTP环境下调试，可以按以下步骤操作：

   • 打开Chrome浏览器，输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
   • 在输入框里添加你的FTP站点地址（比如ftp://your-domain.com）
   • 把这个选项设置为Enabled，然后重启Chrome

   注意：这个方法只适合开发测试，绝对不能用于生产环境，会带来安全风险。

你的代码本身没问题 #

顺便看了下你的代码，逻辑是正确的，只要环境满足安全上下文，就能正常触发事件：

if (window.DeviceOrientationEvent) { 
  window.addEventListener("deviceorientation", function(event) { 
    var alpha = event.alpha; 
    var gamma = event.gamma; 
    var beta = event.beta; 
    console.log("working!!") 
    handleOrientationEvent(alpha, gamma, beta); 
  }, true); 
} 

var handleOrientationEvent = function( alpha, gamma, beta) { 
  $("#message").css({ 
    'transform': 'rotateX(' + Math.floor(alpha) + 'deg) rotateY(' + Math.floor(gamma) + 'deg) rotateZ(' + Math.floor(beta) + 'deg)' 
  }); 
  console.log("working!"); 
}

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