武林網(www.49028c.com)文章簡介：iPad創建簡單的演示目標CSS的頁面.

譯自：iPad Orientation CSS

iPad終于發布了，那么如果用樣式區分iPad和iPhone中的safari瀏覽器，Jason Grigsby做了一個有用的實驗。

就絕大部分而言，iPad上的移動版safari和iPhone上的事一樣的。我發現的一個不同是，iPad上的webkit支持基于方向(orientation)的CSS媒體查詢(media query)聲明。

我為iPad創建了一個簡單的演示目標CSS的頁面。

在CSS中使用orientation 非常簡單，代碼就行這樣：

”stylesheet” ”portrait.css”>”stylesheet” ”landscape.css”>

在這個例子中，兩個CSS文件中的唯一不同就是隱藏其中的一個標題。該演示頁面的HTML部分如下：

”portrait”>You’re Viewing in Portrait Mode”landscape”>You’re Viewing in Landscape</h1>

portrait.css中的CSS只是簡單的隱藏landscape部分的<h1>:

當然，landscape.css的作用與之相反。

你可以在最新版本的Safari/Chrome和Firefox中看到這個CSS查詢。簡單的改變你的瀏覽器的窗口大小，讓其高度大于寬度，你就能看到效果了。