我如何正确检测在iOS中使用JavaScript和Phonegap的方向变化？

我在下面find了这个定位testing代码来寻找JQTouch参考资料。 这在移动safari的IOS模拟器中正常工作，但在Phonegap中不能正确处理。 我的项目遇到了同样的问题，正在杀死这个testing页面。 有没有办法在Phonegap中使用javascript来感知方向变化？

任何帮助，将不胜感激。

window.onorientationchange = function() { /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the left, or landscape mode with the screen turned to the right. */ var orientation = window.orientation; switch(orientation) { case 0: /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class","portrait"); /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */ document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom)."; break; case 90: /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class","landscape"); document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; break; case -90: /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */ document.body.setAttribute("class","landscape"); document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; break; } } 

Answer 1

这就是我所做的：

 function doOnOrientationChange() { switch(window.orientation) { case -90 || 90: alert('landscape'); break; default: alert('portrait'); break; } } window.addEventListener('orientationchange', doOnOrientationChange); // Initial execution if needed doOnOrientationChange(); 

Answer 2

我使用window.onresize = function(){ checkOrientation(); } window.onresize = function(){ checkOrientation(); }在checkOrientation中，您可以使用window.orientation或body width检查，但是我们的想法是，“window.onresize”是最常用的跨浏览器方法，至less在我有机会的大多数移动和桌面浏览器用来testing。

Answer 3

我对iOS和Phonegap也很新，但是我可以通过添加一个eventListener来实现。 我做了同样的事情（使用你引用的例子），并不能得到它的工作。 但是这似乎是诀窍：

 // Event listener to determine change (horizontal/portrait) window.addEventListener("orientationchange", updateOrientation); function updateOrientation(e) { switch (e.orientation) { case 0: // Do your thing break; case -90: // Do your thing break; case 90: // Do your thing break; default: break; } } 

在searchPhoneGap Google群组时，您可能会碰到一些“方向”一词 。

我读过的一个例子是如何检测方向的例子：Pie Guy：（ 游戏 ， js文件 ）。 这和你发布的代码很相似，但是就像你一样……我无法让它工作。

一个警告：eventListener为我工作，但我不知道这是否是一个过度密集的方法。 到目前为止，这是唯一的方法，但我不知道是否有更好，更简化的方法。

---

更新修正了上面的代码，现在它工作

Answer 4

 if (window.matchMedia("(orientation: portrait)").matches) { // you're in PORTRAIT mode } if (window.matchMedia("(orientation: landscape)").matches) { // you're in LANDSCAPE mode } 

Answer 5

在使用orientationchange事件时，我需要一个超时来获取页面中元素的正确尺寸，但matchMedia工作正常。 我的最终代码：

 var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia; if (typeof(matchMedia) !== 'undefined') { // use matchMedia function to detect orientationchange window.matchMedia('(orientation: portrait)').addListener(function() { // your code ... }); } else { // use orientationchange event with timeout (fires to early) $(window).on('orientationchange', function() { window.setTimeout(function() { // your code ... }, 300) }); } 

Answer 6

我发现这个代码检测设备是否横向，在这种情况下添加一个飞溅页面说：“改变方向看到网站”。 它正在iOS，Android和Windows手机上工作。 我认为这是非常有用的，因为它非常优雅，避免为移动网站设置横向视图。 代码工作得很好。 唯一不完全令人满意的是，如果有人加载横向视图中的页面，不会出现启动页面。

 <script> (function() { 'use strict'; var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; if (isMobile.any()) { doOnOrientationChange(); window.addEventListener('resize', doOnOrientationChange, 'false'); } function doOnOrientationChange() { var a = document.getElementById('alert'); var b = document.body; var w = b.offsetWidth; var h = b.offsetHeight; (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = ''); } })(); </script> 

和HTML： <div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>

Answer 7

这是我做的：

 window.addEventListener('orientationchange', doOnOrientationChange); function doOnOrientationChange() { if (screen.height > screen.width) { console.log('portrait'); } else { console.log('landscape'); } } 

Answer 8

我相信正确的答案已经被公布和接受，但是我有一个自己经历过的问题，还有一些在这里提到过。

在某些平台上，事件"orientationchange"被触发的时候，窗口维度（ window.innerWidth ， window.innerHeight ）和window.orientation属性等各种属性不会被更新。 很多时候，属性window.orientation在"orientationchange"触发几毫秒后（至less在iOS版本的Chrome中）是undefined 。

我发现处理这个问题的最好方法是：

 var handleOrientationChange = (function() { var struct = function(){ struct.parse(); }; struct.showPortraitView = function(){ alert("Portrait Orientation: " + window.orientation); }; struct.showLandscapeView = function(){ alert("Landscape Orientation: " + window.orientation); }; struct.parse = function(){ switch(window.orientation){ case 0: //Portrait Orientation this.showPortraitView(); break; default: //Landscape Orientation if(!parseInt(window.orientation) || window.orientation === this.lastOrientation) setTimeout(this, 10); else { this.lastOrientation = window.orientation; this.showLandscapeView(); } break; } }; struct.lastOrientation = window.orientation; return struct; })(); window.addEventListener("orientationchange", handleOrientationChange, false); 

我正在检查方向是否未定义，或者方向是否与检测到的最后一个方向相同。 如果其中一个是真的，我等待十毫秒，然后再parsing方向。 如果方向是适当的值，我调用showXOrientation函数。 如果方向无效，我继续循环检查function，每次等待十毫秒，直到有效。

现在，我将为此做一个JSFiddle，就像我通常所做的一样，但是JSFiddle并没有为我工作，我的支持bug被closures了，因为没有其他人报告同样的问题。 如果有人想把它变成一个JSFiddle，请继续。

谢谢！ 我希望这有帮助！

Answer 9

我正在iPhone的PhoneGap中创build一个jQTouch应用程序。 这个问题我一直在争论好几天。 我已经看到eventlistener解决scheme提出了几次，但只是不能得到它的工作。

最后，我想出了一个不同的解决scheme。 它基本上使用settimeout来定期检查身体的宽度。 如果宽度是320，则方向是纵向的，如果是480则横向。 然后，如果自上次检查后方向发生了变化，则会触发一个人像function或一个风景填充function，您可以在每个方向上进行操作。

代码（注意，我知道在代码中有一些重复，只是没有打扰到修剪它！）：

 // get original orientation based on body width deviceWidth = $('body').width(); if (deviceWidth == 320) { currentOrientation = "portrait"; } else if (deviceWidth == 480) { currentOrientation = "landscape"; } // fire a function that checks the orientation every x milliseconds setInterval(checkOrientation, 500); // check orientation function checkOrientation() { deviceWidth = $('body').width(); if (deviceWidth == '320') { newOrientation = "portrait"; } else if (deviceWidth == '480') { newOrientation = "landscape"; } // if orientation changed since last check, fire either the portrait or landscape function if (newOrientation != currentOrientation) { if (newOrientation == "portrait") { changedToPortrait(); } else if (newOrientation == "landscape") { changedToLandscape(); } currentOrientation = newOrientation; } } // landscape stuff function changedToLandscape() { alert('Orientation has changed to Landscape!'); } // portrait stuff function changedToPortrait() { alert('Orientation has changed to Portrait!'); } 

Answer 10

以下为我工作：

 function changeOrientation(){ switch(window.orientation) { case 0: // portrait, home bottom case 180: // portrait, home top alert("portrait H: "+$(window).height()+" W: "+$(window).width()); break; case -90: // landscape, home left case 90: // landscape, home right alert("landscape H: "+$(window).height()+" W: "+$(window).width()); break; } } window.onorientationchange = function() { //Need at least 800 milliseconds setTimeout(changeOrientation, 1000); } 

我需要超时，因为window.orientation的值不立即更新