iPhone 的 CSS

我做过一个运行在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事件，否则转换方向的时候会非常非常卡。

xuhel

2011-06-13 15:53:13 +08:00

不过经过实验把 @media screen 的判断都写在一个 css 文件里面，只会读取到最后 @media screen 里面定义的效果。

xuhel

2011-06-13 15:54:11 +08:00

还是谢谢大家，这个用@shinyzhu 的方法解决了。