抓住自己最有兴趣的东西，由浅入深，循序渐进地学……
一、html5移动端：手机旋转（js）
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
</head>
<body>
<div id="a">
旋转手机
</div>
<script>
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
}
}
window.addEventListener('orientationchange', orientationChange);
</script>
</body>
</html>
总结：
js ： 监听手机旋转事件：orientationchange；切记：js 监听手机旋转属性用:window.orientation; 之前用event.orientation返回null;
一、html5移动端：手机旋转（jquery）
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div id="a">手机旋转 jquery
</div>
<script>
$(window).bind('orientationchange',function(event){
updateOrientation(event.orientation);
})
function updateOrientation(orientation) {
$("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
</body>
</html>
总结：
jquery ： 监听手机旋转事件：orientationchange；切记：jquery监听手机旋转属性用:用event.orientation;
如果是网页版：改造：
<script type="text/javascript">
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
alert("屏幕旋转");
}, false);
</script>
