除非你的应用程序限定了只在移动设备直立状态或水平状态下使用，一般情况下，你需要调整一些设定。即便你设计的布局流畅时尚，你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API，一个简单的窗口orientationchange事件：

1
2
3
4
5
// 监听方向的改变
window.addEventListener("orientationchange", function() {
// 宣布新方向的数值
alert(window.orientation);
}, false);

发生改变的时候， _window.orientation_属性就改变。值为0表示直立, 90表示设备水平旋转到左边, -90表示设备水平旋转到右边。

调整大小事件

有些设备不支持orientationchange事件，但可以触发resize事件：

1
2
3
4
// 监听调整大小的改变
window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)
}, false);

跟orientationchange事件比起来较不明显，但也是很好用的。

屏幕尺寸

有一些属性可以从window对象恢复，以获取屏幕尺寸及我认为的“虚拟”屏幕大小：

  • 外部宽度，外部高度：真正不动的象素（而不是320×356iPhone直立像素）
  • 内部宽度，内部高度：虚拟不动的象素（而不是320×356iPhone直立像素）
    当然，这些数据不能告诉你方向的变化，需要通过简答的数学计算，你就知道现在的窗口状态是更宽了还是更高了。

媒体查询

你还可以通过CSS媒体查询判定方向：

1
2
3
4
5
6
7
8
/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}

更聪明的做法是，用JavaScript编写一个循环的”watcher” ，用以检查一个块的背景颜色，并触发你自己的方向改变。

匹配媒体

本地_window.matchMedia_方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 寻找匹配
var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角
if(mql.matches) {
// 直立方向
} else {
//水平方向
}

// 添加一个媒体查询改变监听者
mql.addListener(function(m) {
if(m.matches) {
// 改变到直立方向
}
else {
// 改变到水平方向
}
});