使用CSS媒體查詢檢測方向的最佳方式是什麼？

使用CSS @media查詢檢測設備方向的最可靠方法是什麼？使用CSS媒體查詢檢測方向的最佳方式是什麼？

我嘗試這些：

@media screen and (orientation: portrait) 
@media screen and (orientation: landscape)

但他們並不適用於所有情況。 On some Android devices，因爲長寬比大於1/1，所以顯示縱向模式下的鍵盤可以使其使用「方向：橫向」查詢。

我見過suggestions改用此：

@media screen and (max-aspect-ratio: 13/9) // portrait 
@media screen and (min-aspect-ratio: 13/9) // landscape

但這些並不在PhoneGap的在iPad上運行;你需要的比例更像12/9。我有點擔心瞄準這種特定的比例，因爲可能存在橫向模式小於該比例的設備。

那麼有沒有更可靠的方法來測試呢？（我只尋找一個CSS @media查詢，而不是一個JavaScript的解決方案。）

來源

2013-06-28 JW.

我不是一個親與方向，但也許你可以爲橫向像兩個條件：

@media screen and (min-aspect-ratio: 13/9), screen and (orientation:landscape)

來源

2013-06-28 19:13:07 GuiGreg

我認爲方向查詢只是檢查長寬比大於或小於1/1，所以這是行不通的。 –

JW是對的，建議的邏輯和檢查方向一樣：風景。 –

我仍然想找到一個僅限CSS的解決方案，但我想到了一種使用JavaScript來生成@media查詢的方法。

假設您已經可以使用JavaScript正確檢測方向更改，則可以使用適當的規則動態生成style標記。當你這樣做，並且你處於肖像模式時，根據當前文檔的寬度向查詢添加一個寬度約束。例如：

var portraitQuery, landscapeQuery; 
if (currentOrientation === "portrait") { 
    portraitQuery = "@media (orientation: portrait)" 
     + " or ((orientation: landscape)" 
      + " and (max-width: " + (window.innerWidth) + "px))", 
    landscapeQuery = "@media (orientation: landscape)" 
     + " and (min-width: " + (window.innerWidth + 1) + "px)"; 
} else { 
    portraitQuery = "@media (orientation: portrait)"; 
    landscapeQuery = "@media (orientation: landscape)"; 
}

然後，當方向改變時，重新生成這些查詢。我們的想法是，如果您處於縱向模式並且@media方向更改爲橫向，則不會使用「橫向」查詢開始，除非寬度也增加。如果您只顯示鍵盤，則不會發生這種情況。

我不確定這是多麼可靠，但它到目前爲止工作。

來源

2013-07-01 20:07:15

使用CSS媒體查詢檢測方向的最佳方式是什麼？

回答

相關問題