我在下面寻找 JQTouch 参考资料时找到了这个方向测试代码。这在移动 Safari 上的 iOS 模拟器中可以正常工作,但在 Phonegap 中无法正确处理。我的项目遇到了同样的问题,导致这个测试页面被杀死。有没有办法在 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; } }
这就是我所做的:
function doOnOrientationChange() { switch(window.orientation) { case -90: case 90: alert('landscape'); break; default: alert('portrait'); break; } } window.addEventListener('orientationchange', doOnOrientationChange); // Initial execution if needed doOnOrientationChange();
2019 年 5 月更新: 根据 MDNwindow.orientation,这是一个已弃用的功能,大多数浏览器都不支持。该事件与 window.orientation 相关联,因此可能不应该使用。orientationchange
window.orientation
orientationchange