HTML5判断移动端横屏竖屏功能 - uis.cc - 前端技术博客

在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿就为大家分享分享。

用CSS判断横屏竖屏问题。CSS代码如下

1 2	@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { } 竖屏

用JavaScript判断横屏竖屏问题。JavaScript代码如下

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
        alert('竖屏状态！');
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
        alert('横屏状态！');
    }  
}, false);