使用javascript检测方向变化

Question

是否可以使用JavaScript在iPad或Galaxy Tab上检测浏览器方向的变化？我认为使用CSS媒体查询是可能的。

Answer 1

更新：

您可能要签出

jQuery移动方向更改

或普通的JS之一：

window.addEventListener("orientationchange", function() {
  alert(window.orientation);
}, false);

MDN：

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

较旧的答案

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-
tips/

iPad上的Safari确实支持window.orientation属性，因此，如有必要，您可以使用它来确定用户是水平还是垂直模式。作为此功能的提醒：

window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)

旋转设备时，还会在窗口对象上触发directionchange事件。

您还可以使用CSS媒体查询来确定iPad是垂直放置还是水平放置，例如：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-
and-Set-the-iPhone–iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-
Tags
.htm

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>