检查手机端的屏幕是横向还是纵向

Question

手机端的网页可能会存在横向或者纵向，PC 的网页则没有这些区别，也没有相关的 API 去检查这个属性，普通的网页纵向的浏览方式是最好的，可能有一些特别的应用适合横向的屏幕浏览，比如说小游戏、视频等，我们可以检查这个属性，提醒用户以舒适的方式浏览我们的网页。

orientationChange

orientationChange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

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

// jQuery 写法
$(window).on("orientationchange",function(){
    alert("方向已改变!");
});

如果用户改变屏幕的方向，window.orientation 的值会发生变化，-90 意味着该设备横向旋转到右侧，而 90 表示该设备是横向旋转到左边。

Resize

有些设备并没有提供 orientationchange 事件，但是会触发窗口的 resize 事件：

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

}, false);

可能没有 orientationchange 事件那么好用，但是这不失为一种有效的解决方法，只是无法检查用户旋转的方向。

直接比较屏幕的长宽比

手机的屏幕肯定是矩形的，这意味着有一边长一点，有一边要短一点，使用长度除以宽度，如果值是大于 1 的，那么就表明用户是竖着屏幕的，反之亦然。

if(window.screen.availHeight/window.screen.availWidth > 1){
    // 纵向屏幕
}else{
    // 横向屏幕
}

结合上面的 resize 方法，就能检测用户旋转屏幕的方向了。

媒体查询

我们还可以通过 CSS 的媒体查询确定屏幕的方向：

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

matchMedia

进一步的通过 JS 的媒体查询，也能确定屏幕的方向：

// 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
 }
});

上面这么多的方法，总有一个适合你的项目，如果你有更好的解决方法，请留言告诉我。