使用javascript检测方向更改

问题描述

使用javascript可以检测iPad或Galaxy Tab上浏览器的方向变化吗？我认为可以使用css媒体查询。

解决方案

更新： b

您可能想查看

或纯JS：

  window.addEventListener（orientationchange，function（）{
 alert（window.orientation）; 
}，false）; 
  
 
 
 
 
 
 
 旧答案 / p> 
 
 
  
 
 
 
 iPad上的Safari不支持窗口.orientation属性，因此如果需要，您可以使用它来确定用户是处于水平还是垂直模式。作为此功能的提醒：
 垂直放置时window.orientation为0 
 window.orientation为90向左旋转90度（水平）
 window.orientation在向右旋转90度（水平）时为-90 
  
当设备旋转时，还会在窗口对象上触发orientationchange事件。
 
 
 
您还可以使用CSS媒体查询来确定iPad正以垂直或水平方向放置，例如：
 < link rel =stylesheetmedia =all和（方向：纵向）href =portrait.css> 
< link rel =stylesheetmedia =all and（orientation：landscape）href =landscape.css> 
  
 
 
 
 
 
 
  
 < 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> 
  
 
Is it possible to detect change in orientation of the browser on the iPad or Galaxy Tab using javascript? I think it's possible using css media queries.
 解决方案 
UPDATE:
You might want to check out 
jQuery mobile orientationchange 
or the plain JS one:
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
Older answer
http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:
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)
There is also the orientationchange event that fires on the window object when the device is rotated.
You can also use CSS media queries to determine if the iPad is being held in vertical or horizontal orientation, such as:
<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>
                        
这篇关于使用javascript检测方向更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！