HTML5移动端 横竖屏幕切换

移动端教程 04/13 阅读 58 views次 人气 0
摘要:

HTML5+CSS3移动端 横竖屏幕切换,移动端的开发中经常碰到横屏竖屏的问题,以及横屏和竖屏切换问题。

同一个CSS中:

@media screen and (orientation: portrait) {   
  /*竖屏 css*/   
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/   
}


不同的CSS中:

竖屏-->

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏-->

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">


JS判断横屏竖屏:

//判断手机横竖屏状态:   
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);


屏幕方向对应的window.orientation值:

ipad,iphone: 90 或 -90 横屏

ipad,iphone: 0 或180 竖屏

Andriod:0 或180 横屏

Andriod: 90 或 -90 竖屏

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

2、通过添加监听事件onorientationchange,根据实际需求而执行相应的程序。


评论

表情

分享到: