我在下面找到了这个方向测试代码,寻找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 …我正在开发我的网站的移动版本.我尽可能地使用媒体查询和CSS,但我也使用一些javascript,例如,将我的导航转换为较小设备上的折叠/展开列表以节省空间.
为了处理所有这些,我试图使用window.resize事件.这样可以在桌面浏览器调整大小时实现魔力,但是当我不期待它们时,我会在iPad/iPhone上调整大小.
在桌面浏览器上,如果我实际调整窗口大小,我只会收到调整大小事件.在移动浏览器上,当我更改方向(预期)时,我会收到调整大小事件,但是当我切换到展开/折叠某些内容时,我也会得到它.
这是一个简单的例子:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
$(".opener").click(function(){
$(".box").slideToggle();
});
$(window).resize(function(){
alert("resized");
});
});
</script>
</head>
<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>
单击桌面浏览器上的链接时,不会发出警报.点击iPhone/iPad上的链接,即可获得提醒.这是怎么回事？