原文地址：http://insideria.com/2010/08/detecting-screen-orientation-i.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+oreilly/insideria+(InsideRIA)

感谢翻译者：szr

正如上一篇帖子中提到的，我最近在基于本机和浏览器的移动设备的应用上花了大量时间。在这个帖子中，我想要分享简单而有用的javascript技巧，这个技巧是我在开发能够检测和响应屏幕方向变化的移动网络应用程序中学会的。它适用于支持设备方向变化的写字板和智能手机，包括iPad,iPhones，尤其是Android设备。

Insideria.com的移动布局仅仅是用来演示设备的定向，这不是本贴讨论的技术。

基于纯CSS的布局有多种方式，如相对定位，绝对定位，基于约束的布局等等。您甚至可以使用CSS媒体选择器使横向或纵向有不同的风格特性（注：没有在设备中广泛应用）。然而，如果您想要在方向变化时完全改变用户界面怎么办？用这项技术，您能改变布局要素、风格、内容或者它们之间的任意组合。

应用苹果公司的基于webkit的设备（iPod, iPhone, iPad）能很容易地做到这一点... 在webkit中有windows.orientation属性让您获取屏幕方向。还能在屏幕方向变化时触发windows.onorientation事件。 您能够设置一个事件响应的监听，每当orientationchang事件被触发时，这个监听相应地更新界面。 很简单，很直接……

现在，假如您使用的能识别方向改变的平台或设备是不同类型的，它无法通过事件响应或窗体对象的属性设置来给浏览器传递信息，那怎么办呢？ 您所能依赖的一点是，屏幕尺寸将会改变，因此浏览器会调用resize事件。 一般来说，可以很有把握地认为此设备能正确地为屏幕定向，您只需要对布局做相应的更新就可以了。 如果宽度大于高度，您可以认为这是纵向显示模式。 否则就是横向显示模式。 您甚至可以以编程的方式调整基于屏幕尺寸的用户界面元素，包括为了增加可读性而改变字体，改变内容布局或者更新内容以更好地利用数据密度和用户界面元素。

以下代码对于完成这个任务非常有效（jQuery syntax）： 

$(document).ready(function(){
   if ( window.orientation != undefined )
     window.onorientationchange = updateView;
   else
     $(window).resize( updateView );
}

function updateView() {
   //update layout, styles, or content here
   //this could be based on screen dimensions
}

还有一件要注意的事情是，这项技术不仅仅限于设备。 它甚至可以用来调试动态用户界面布局，也可通过简单的调整桌面浏览器窗口尺寸来模拟屏幕方向变化。因此，即使没有物理设备，您也可以轻松开发和调试。 然而，要永远使用物理设备进行测试，因为具体的设备问题似乎总是会突然出现。

考虑使用一个视图验证机制来减少不必要的处理器开销也是一个不错的主意，但我想把它留在下一篇帖子中讲……