如何锁定应用程序的垂直方向？

Question

我正在使用具有基于 Angular 14 微前端架构的应用程序。如何阻止方向变化？我的意思是，我希望屏幕始终水平显示。

Answer 1

我找到了三种查看设备方向的方法

一种方法是使用原生js实现全屏视图

// (A1) GO INTO FULL SCREEN FIRST
let de = document.documentElement;
if (de.requestFullscreen) { de.requestFullscreen(); }
else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); }
else if (de.webkitRequestFullscreen) { de.webkitRequestFullscreen(); }
else if (de.msRequestFullscreen) { de.msRequestFullscreen(); }

// (A2) THEN LOCK ORIENTATION
screen.orientation.lock('landscape');

第二种方法是使用CSS

@media only screen and (orientation:portrait) {
  body {
    height: 100vw;
    transform: rotate(90deg);
  }
}

第三种方法是提醒用户旋转设备

<!-- (A) THIS WILL SHOW ON THE WRONG ORIENTATION -->
<div id="turn">
  Please rotate your device!
</div>

<!-- (B) CONTENTS AS USUAL -->
<div id="container">
  Main contents here.
</div>

/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (orientation:landscape) {
  #turn { display:block; }
  #container { display:none; }
}
 
/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (orientation:portrait) {
  #turn { display:none; }
  #container { display:block; }
}