譯自：iPad Orientation CSS
iPad終於發布了，那麼如果用樣式區分iPad和iPhone中的safari浏覽器，Jason Grigsby做了一個有用的實驗。
就絕大部分而言，iPad上的移動版safari和iPhone上的事一樣的。我發現的一個不同是，iPad上的webkit支持基於方向(orientation)的CSS媒體查詢(media query)聲明。
我為iPad創建了一個簡單的演示目標CSS的頁面。
在CSS中使用orientation 非常簡單，代碼就行這樣：
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
在這個例子中，兩個CSS文件中的唯一不同就是隱藏其中的一個標題。該演示頁面的HTML部分如下：
<h1 id=”portrait”>You’re Viewing in Portrait Mode</h1> <h1 id=”landscape”>You’re Viewing in Landscape</h1>
portrait.css中的CSS只是簡單的隱藏landscape部分的<h1>:
#landscape {display:none}
當然，landscape.css的作用與之相反。
你可以在最新版本的Safari/Chrome和Firefox中看到這個CSS查詢。簡單的改變你的浏覽器的窗口大小，讓其高度大於寬度，你就能看到效果了。