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

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 {
// 改变到水平方向
}
});