shinyzhu
2011-03-17 08:43:03 +08:00
我做过一个运行在iPad上面的Web App，但基本原理都一样的。
在头部引用CSS文件的时候就可以为不同方向分别引入不同的样式表：
<link rel="stylesheet" type="text/css" href="/content/css/mc.portrait.css" media="all and (orientation:portrait)" />
<link rel="stylesheet" type="text/css" href="/content/css/mc.landscape.css" media="all and (orientation:landscape)" />
响应方向变化可以为body注册orientationchange事件：
<body onorientationchange="mcHandleOrientationChange();">
js函数：
/* OrientationChanged */
function mcHandleOrientationChange(e) {
switch (window.orientation) {
case 0: //Portrait
case 180: //Portrait (upside-down portrait)
mcCommon.updateViewForOrientation('portrait');
break;
case -90: //Landscape (right, screen turned clockwise)
case 90: //Landscape (left, screen turned counterclockwise)
mcCommon.updateViewForOrientation('landscape');
break;
}
}
这样就可以了。但是以下是要注意的：
当然你可以在脚本里注册body的事件，但是绝对不能用jQuery的代码注册orientationchange事件，否则转换方向的时候会非常非常卡。