检测移动设备方向的改变

换了份工作，终于接触到了移动前端，随着工作内容的变更，学习的一个也是不断在更新。查阅资料时找到的一篇，比较简明易懂，遂翻译。

---

除非你的设备只允许横向或纵向视图，否则你很有可能需要调整一些东西。即使你已经建立的布局流畅优美又符合潮流，也可能需要以编程的方作出一些更改。这就需要一些策略用以检测页面是否已经改变，让我们来了解一下如何检测移动设备方向的改变吧。

orientationchange事件

这个来自mobile API的方法正是你所期待的，window对象的一个简单的方向改变事件：

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

在这个变化中，window.orientation属性的值将会发生变化。0代表垂直视图，-90代表设备向右旋转至横向、90代表设备向左旋转至横向。

resize事件

有些设备没有提供对orientationchange事件的支持，但它们支持window对象的resize事件：

 // Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

不像orientationchange事件那样直接易懂，但很好用。

屏幕尺寸

你可以从window对象中取出一些属性以得到屏幕尺寸和我认为“实际上”的屏幕尺寸：

• outerWidth和outerHeight：窗口占据的尺寸
• innerWidth和innerHeight：实际视图尺寸

当然，它们并不直接告诉你设备的方向，但是通过一些非常简单的数学计算，很容易就可以知道当前屏幕的尺寸是更高还是更宽。

媒体查询

我们也可以用CSS的媒体查询来识别设备的方向：

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

如果你想耍点小聪明，你可以用JavaScript编写一个周期性的“监视器”来检测一个块级元素的背景颜色并触发你自己的方向变化事件。

matchMedia

原生的window.matchMedia方法允许实时进行的媒体查询。我们可以利用上面的媒体查询方法以获知当前设备到底是垂直还是水平方向：

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
    // Portrait orientation
} else {  
    // Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
    if(m.matches) {
        // Changed to portrait
    }
    else {
        // Changed to landscape
    }
});

这是我的一些意见和想法。如果你使用过其他的使用技巧，欢迎与我交流！

作者：David Walsh
原文：https://davidwalsh.name/orientation-change