JavaScrpit判断横竖屏

 JavaScript

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.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

?

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

　　

手机倒立过来，没有出现屏幕旋转，所以180度是没有用的。

(1)window.orientation 适用安卓手机和iphone6s,其他苹果手机未测试。

(2)window.screen.orientation

适用windows chrome，安卓手机。

iphone6s不适用,其他苹果手机未测试。

---