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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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的值？呵呵，确实不能。