您的位置：首页 > 其它

Web开发中管理ipad屏幕的方向变化

2014-03-24 19:01 405 查看
Web开发中，我们会遇到在手机垂直或水平视角时展示不同状态的情况。下面我来总结一下检测移动设备方向变化的一些方法。

1 使用javascript

直接看代码：
<script type="text/javascript">
window.onorientationchange = function () {

if ( orientation == 0 ) {
alert ('Portrait模式, Home键在下边');
}
else if ( orientation == 90 ) {
alert ('Landscape模式, Home键在右边');
}
else if ( orientation == -90 ) {
alert ('Landscap模式, Home键在左边');
}
else if ( orientation == 180 ) {
alert ('Portrait模式, Home键在上边');
}
}
</script>
原理很简单，采用window的onorientationchange的处理。每次屏幕视角方向改变时，都会触发onorientationchange事件，我们通过读取orientation属性来检测屏幕的方向(如果在firefox下，则为screen.orientation,如果是window phone IE11，则属性前都要加上ms前缀，如msOrientation，MSOrientationChange)，不过这里需要注意的是，文档加载时并不会触发onorientationchange事件。因此，如果需要在文档加载时确定文档的方向，可将orientationChangeHandler()函数赋给onload事件。
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
//handle orientation change
});
});

2 CSS 检测

css media 查询中可以检测设备的视角方向，示例代码如下：
@media screen and (orientation: portrait) {
//your style
}

@media screen and (orientation: landscape) {
// your style
}
你同样可以通过条件注释添加对不同视角的css文件引用：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

3 阻止屏幕方向变化 (仅在firefox和ie11中支持)

如果我们要阻止屏幕方向的变化，可以使用Screen.lockOrientation()（ie11中为msLockOrientation）方法。Screen.lockOrientation() 方法接受屏幕的方向字符串或字符串数组为参数，可选参数为：portrait-primary
Portrait模式, Home键在下边
portrait-secondary
Portrait模式, Home键在上边
landscape-primary
Landscape模式, Home键在右边
landscape-secondary
Landscap模式, Home键在左边
portrait：
所有portrait模式
landscape：所有landscape模式default：浏览器默认模式，根据屏幕分辨率决定，如1280*800为landscape模式，800*1280为portrait模式示例代码：
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;if (lockOrientation("landscape-primary")) {// orientation was locked} else {// orientation lock failed}//参数可同样为字符串数组if (lockOrientation(["landscape-primary", "landscape-secondary"])) {// orientation was locked} else {// orientation lock failed}
如果要解除锁定的话，可以使用Screen.unlockOrientation能否使用javascript动态设定屏幕方向？ 很遗憾，不能。设置orientation的值？ 呵呵，确实不能。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航