CSS3：爲iPhone檢測設備方向

Question

因此，此聲明適用於iOS 4和4.1，但不適用於舊版本。有什麼建議？

@media screen and (device-width:320px) and (orientation:portrait) { 
    /* iPhone Portrait Styles Here*/ 
} 

@media screen and (device-width:320px) and (orientation:landscape) { 
    /* iPhone Landscape Styles Here*/ 
} 

Answer 1

我們使用JavaScript來做到這一點，以類似的方式，以這樣的：

Can js/jQuery determine the orientation of the iPhone?

Answer 2

是。按照MDN docs：

方向

價值：景觀|肖像

媒體：視覺

接受最小/最大前綴：無

表示視口是否是橫向（顯示較寬 大於高度）或縱向（在顯示比它寬） 模式。

例

要僅在縱向應用樣式表：

@media all and (orientation: portrait) { ... }

注：此值不 不對應於實際設備取向。在大多數設備上縱向打開軟鍵盤 將導致視口到 變得比它高，因此導致瀏覽器使用橫向樣式而不是縱向。