譯自：The orientation media query
然而，我還是想要指出的小瑕疵，以使你完全理解什麼時候使用orientation，什麼時候使用device-width。
orientation被Android 2、Bolt、MicroB和Firefox支持，現在，顯然也被iPad支持了。iPhone尚不支持它。我們馬上就會看到這為什麼是不幸的，就把這個添加到我的iPhone OS 4的希望列表中吧。
我曾經常在杜塞爾多夫與沃達豐討論媒體查詢，然後最終一致認為orientation相對沒什麼用，相反我們應該使用device-width。
首先，device-width被更廣泛的支持。Opera、所有的移動版WebKit、以及Firefox 和MicroB 都支持這個媒體查詢。
其次，device-width會告訴你你需要知道的內容，而orientation不會。問題不是一個設備是縱向還是橫向，而是屏幕有多少可用空間。
這正是device-width能夠告知你的。它使用具體的屏幕分辨率(在JavaScript中可使用screen.width/height)，並允許你利用該信息到你的樣式表中
1 2 3
@media all and (max-device-width: 400px) {
// 用於最大寬度400px的樣式
}
現在你可以確定你的樣式只會應用於400px或更小的屏幕。無論設備是橫屏還是縱屏。不過，它可能會把事情搞的有點兒混亂，因為一些低端手機的橫屏可能會小於400px，而一些高端手機的縱屏寬度可能就會大於400px。
你沒有辦法只用來orientation解決它。它不會告訴你關於屏幕分辨率的任何事情，只是關於當前用戶怎麼拿這個設備。這在某些情況下可能比較有意思，但不是在你制作基本的CSS布局的時候。
所以作為一個通用的規則，應該避免orientation而使用device-width代替。
然而，在iPhone OS中有些問題。那些設備通常就是320px(iPhone)或者，我估計，iPad會是768px。(使用iPad的朋友可否在這個測試頁面中確認一下最終的數字？PS:原文評論者有人測試，確實是768px，而不是之前媒體報道的1024px——神飛注)
這個設備的寬度在你切換到橫屏的時候保持不變，它沒有更新到你現在可用的更寬的屏幕。(screen.width/height同樣也不會。)
這可能是Apple故意的，而不是一個bug。保持最終的設備寬度不變意味著頁面(或者APP)在用戶旋轉設備的時候不會改變它們的布局。
即便如此，這還是令人糾結的。當我們創建越來越多的移動網站的時候，關於設備、屏幕、頁面、縮放比例以及滾動偏移的精確信息將變得非常重要。(在接下來的幾個月中，我將完全地抓住這一點。浏覽器廠商們，你們要小心了。)
所以iPhone限制了網頁開發者需要的關鍵信息。因此我將這個行為當作一個bug，不管事實上它可能是故意的。
無論如何，由於orientation媒體查詢的情況對iPhone OS很重要，也許你將不能辨別用戶已經改變了設備的方向。這就是為什麼說iPhone不支持它是一個遺憾的原因了，而iPad的做法是一個好消息。
總結:
device-width媒體查詢；orientation媒體查詢做為擴展。其實到現在我還完全不能確定你該如何將這兩個整合到iPhone OS系統或者單獨使用它們。我將思考一下，或者某個讀者能給出一個好的可行性方案。