方向改变事件(orientationchange)

当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时,你的回调函数可以加入第二个参数,作用为描述设备横或纵向的属性,"portrait"或;landscape"。这些值也会作为class值加入到html的元素中,使你可以通过css中的选择器改变他们的样式。注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

手持设备方向改变时执行

   $(window).bind( 'orientationchange', function(e){
    var height=document.body.clientHeight - 195;
    $("#content").css("min-height",height);
    $("#thumb").css("margin",height/4.2 + "px auto");
    });

以上示例是本人用于在手持设备改变方向时填充整个页面,避免出现空白,可以根据自己的需求扩展。

$(function(){
  $('a').click(function(){
    $(window).trigger('orientationchange' );
  });
});

 

在智能手机和平板设备上,只有一个名称为orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转,您可以访问方向属性,它提供一个只读值portrait 或 landscape。

绑定到 orientationchange 事件要求您定位 body 元素,然后使用 bind 方法来绑定事件。将orientationchange 事件绑定到body,但是要等待元素在文档就绪后,再绑定事件,这也很重要。否则,您会获得不一致的结果,因为body 元素可能在绑定时不可用。您也可以进一步增强该代码,当文档就绪时触发orientationchange 事件。

当文档就绪时触发orientationchange 事件

 

<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script type="text/java script">
$(document).ready(function(){
	$(".tap-hold-test").bind("taphold", function(event) {
	$(this).html("Tapped and held");
	});
});
</script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li class="tap-hold-test">Tap and hold test</li>
</ul>
</div>
</div>
</body>
</html>

$(document).ready(function(){
	$('body').bind('orientationchange', function(event) {
	  alert('orientationchange: '+ event.orientation);
	});
});

当文档就绪时触发事件,这使您可以确定 Web 页面初始加载时的方向。当您需要 在用设备的当前方向显示内容时,这特别有用。您也可以通过CSS 访问方向值,因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以 设备的方向修改内容布局。