首页风格
门户
博客

如何检测移动设备方向的变化

日期:2013-10-14  来源:GBin1.com

如何检测移动设备方向的变化

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

orientationchange事件

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

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

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

调整大小事件

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

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

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

屏幕尺寸

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

  • 外部宽度,外部高度:真正不动的象素(而不是320×356iPhone直立像素)
  • 内部宽度,内部高度:虚拟不动的象素(而不是320×356iPhone直立像素)

当然,这些数据不能告诉你方向的变化,需要通过简答的数学计算,你就知道现在的窗口状态是更宽了还是更高了。

媒体查询

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

/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}

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

匹配媒体

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

// 寻找匹配
var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配,则我们处于垂直视角
if(mql.matches) {
// 直立方向
} else {
//水平方向
} // 添加一个媒体查询改变监听者
mql.addListener(function(m) {
if(m.matches) {
// 改变到直立方向
}
else {
// 改变到水平方向
}
});

以上是一些建议,我也希望收集更多大家的方法!

via 极客标签

来源:如何检测移动设备方向的变化

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐