如何反转屏幕旋转对 Chrome 的影响？

Question

我正在创建一个应用程序，用户可以在其中旋转他的手机，但网页内的图像会反方向旋转，因此它看起来像是静止的。

var rotate = 0 - window.orientation;
image.style.transform = "rotateZ("+ rotate * (Math.PI/180) +"deg)";

Answer 1

经过几个小时的工作，我创建了一个适合我的解决方案。找到方向的变化并为其添加角度这是代码：

          var difference = initialAngleOfImage - Math.abs(event.alpha);
          if(difference >= 0 && difference <= 15){
              difference = 15;
          }
          if(difference >= 16 && difference <= 30){
              difference = 15;
          }
          else if(difference >= 31 && difference <=45){
              difference = 45;
          }
          else if(difference >= 46 && difference <=60){
              difference = 60;
          }
          else if(difference >= 61 && difference <=90){
              difference = 30;
          }

如何反转屏幕旋转对 Chrome 的影响？

How can I reverse the effect of screen rotation on Chrome?

html

javascript

css

screen-orientation

css-transitions