1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">  

應(yīng)用的地方

（1）手機(jī)WEB頁面元素內(nèi)容一般都是通過百分比定義的，以便能夠在不同分辨率設(shè)備下都能正常顯示，雖然這樣，但是移動設(shè)備的屏幕分辨率寬度和高度相差還是很大，同樣的頁面在屏幕翻轉(zhuǎn)過來時可能百分比定義的元素寬度會變得非常大，這樣就會失去頁面的美觀性，這樣，如果用orientation匹配屏幕的翻轉(zhuǎn)狀態(tài)，就可以寫不同的css加以控制頁面樣式。

（2）對于有背景圖的移動WEB頁面，可以根據(jù)orientation匹配屏幕屏幕狀態(tài)，設(shè)置不同的background。

（3）稍微有技術(shù)的一點：某些有絕對定位元素的WEB頁面，將某元素定位到頁面底部，當(dāng)屏幕是豎屏狀態(tài)時，可能因為頁面總長度小于屏幕高度(但是大于屏幕寬度)，這時將絕對定位元素定位到底部是正確的，但是當(dāng)屏幕翻轉(zhuǎn)成為橫屏?xí)r，此時因為頁面內(nèi)容高度大于屏幕高度(就是未翻轉(zhuǎn)時屏幕寬度)，絕對定位元素會覆蓋在頁面內(nèi)容之上，導(dǎo)致頁面出現(xiàn)問題，這時可用orientation匹配屏幕狀態(tài)，調(diào)整css代碼。

關(guān)于匹配屏幕橫豎屏狀態(tài)還可通過JS判斷，js中onorientationchange是window的一個事件，可以通過監(jiān)聽事件匹配屏幕橫豎屏。