轉載自：https://www.2cto.com/kf/201401/272693.html

1.CSS樣式橫豎屏

@media (orientation: portrait) { } 橫屏
@media (orientation: landscape) { }豎屏


<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">橫屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">豎屏
 

2.使用addEventListener來新增監聽事件

//移動端的瀏覽器一般都支援window.orientation這個引數，通過這個引數可以判斷出手機是處在橫屏還是豎屏狀態。

從而根據實際需求而執行相應的程式。通過新增監聽事件onorientationchange，進行執行就可以了。

 window.addEventListener('orientationchange', function (e) {
      if (window.orientation == 180 || window.orientation == 0) {
        alert("豎屏");
      } else if (window.orientation == 90 || window.orientation == -90) {
        alert("橫屏");
      }
    });
 

      親測第二種方式有效，第一種方式暫未使用過