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不适用,其他苹果手机未测试。