HTML5 | | CSS3 判断手机横竖屏

使用CSS或HTML5判断手机横竖屏状态

CSS3 判断横竖屏

@media screen and (orientation: portrait) {

 body{background:red;}

@media screen and (orientation: landscape) {
 body{background:blue;}
}  
#box{
color: #fff;font-size: 30px;
text-align: center;


HTML5判断横竖屏


window.addEventListener("deviceorientation", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert("竖屏状态!");

if (window.orientation === 90 || window.orientation === -90 ){ 
alert("横屏状态!");
}  
}, false);

验证码: 看不清楚?