使用JavaScript怎么判斷移動端手機的橫豎屏狀態

使用JavaScript怎么判斷移動端手機的橫豎屏狀態，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

(一)、css判斷橫屏還是豎屏

1、寫在同一個css文件中

@media screen and (orientation: portrait) {
 /*豎屏 css*/
} 
@media screen and (orientation: landscape) {
 /*橫屏 css*/
}

根據橫豎屏設置大小時，正常頁面尺寸常規書寫即可，橫屏樣式單獨設置。即只需在原有樣式基礎上添加橫屏樣式即可，

@media screen and (orientation: landscape) {
 /*橫屏 css*/
}

當用戶橫屏時加載橫屏樣式，豎屏時取消橫屏樣式即加載默認樣式。

2、分開寫在兩個css中，根據橫豎屏引用不同樣式文件：

    根據橫豎屏引用不同樣式文件

橫屏：

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >

豎屏：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >

備注：css判斷橫豎屏是時時的可無縫銜接，即橫屏加載橫屏樣式，豎屏加載豎屏樣式，

（二）js判斷橫屏還是豎屏

//判斷手機橫豎屏狀態：
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
      console.log("豎屏");
      $(".codeIg_s").removeClass('vercreen');//取消橫屏樣式
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
      console.log("橫屏");
      $(".codeIg_s").addClass('vercreen');//添加橫屏樣式
    } 
  }, false);

備注：橫屏樣式在vercreen類名下修改原默認樣式，可正常使用，缺點是必須有橫豎屏的切換狀態才會觸發。

如果用戶默認是橫屏狀態時不會觸發橫屏條件判斷，只有用戶從橫屏轉為豎屏或者從豎屏轉為橫屏時才會觸發相應條件判斷。

沒有切換狀態時會不執行任何條件判斷，此處不如css判斷橫豎屏全面。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。