技术频道


CSS、JS 判断手机横竖屏

CSS 判断横竖屏:


@media screen and (orientation: portrait) {

  /*竖屏 css*/
  ...

} 

@media screen and (orientation: landscape) {

  /*横屏 css*/
  ...

}

JS 判断横竖屏:


// 移动端的浏览器一般都支持window.orientation这个参数,
// 通过这个参数可以判断出手机是处在横屏还是竖屏状态。

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);

CSS、JS 判断手机横竖屏:




发表评论