JavaScrpit判斷橫豎屏

 JavaScript

function setLandscapeClass(){
  if(window.orientation === 90 || window.orientation === -90 ){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "landscape"
  }
  if(window.orientation === 180 || window.orientation === 0){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "portrait"
  }
}

setLandscapeClass()

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", setLandscapeClass, false);

　　

CSS

.landscape{
  z-index: 1001;
  width: 100%;
  height: 100%;
  top: 0rem;
  left: 0rem;
  background: url('../images/landscape_tip.gif') no-repeat;
  background-size: cover;
  position: fixed;
}

.portrait{
  display: none;
} 

HTML

 <div id="landscapeBox"></div>

　　

手機倒立過來，沒有出現屏幕旋轉，因此180度是沒有用的。

(1)window.orientation 適用安卓手機和iphone6s,其餘蘋果手機未測試。

(2)window.screen.orientation

適用windows chrome，安卓手機。

iphone6s不適用,其餘蘋果手機未測試。