CSS媒體查詢：使用比較

Question

我想嘗試的工作出來的自適應網頁設計的方法與移動和桌面瀏覽器共存。

起初看起來像CSS使用媒體查詢是我需要什麼，所以我和那去了，但它看起來像谷歌瀏覽器是搞亂了我想做的事。

相比大多數的瀏覽器，在大多數情況下只是移動瀏覽器迴應的方向媒體查詢，這似乎是針對移動瀏覽器，無論是屏幕尺寸的好方法。但是，由於某種原因，谷歌瀏覽器不僅會對此作出響應，而且實際上會根據視口的尺寸（窗口本​​身）選擇「橫向」和「縱向」，並且與屏幕本身的位置無關。

這給我帶來了另一個潛在的想法。我注意到，在我的移動設備上，即使Chrome認爲窗口尺寸符合肖像模式，設備寬度和設備高度也會根據橫向和縱向模式交換位置，而桌面上的Google Chrome始終會報告顯示器的正確尺寸。 我希望做的是找出一種方法來製作媒體查詢，以確定設備寬度是否大於設備高度。這應該允許我確定屏幕的真實方向，而不管視口大小和Chrome的方向值如何。

我最終的目標是能夠針對任何報告方向的設備設計一個特別適用於移動設備的佈局頁面方向：縱向和設備寬度小於設備高度，這應該只發生在真實在縱向模式下的移動設備（或罕見的橫向PC顯示器，我不介意無意中瞄準），同時爲屏幕寬於高度的任何設備提供橫向/桌面友好佈局。

我使用任何形式的Javascript，用戶代理查詢，或者服務器端腳本來實現這一點堅決避免。媒體查詢似乎是最快和成本最低（處理方式）的方法，有一個頁面可以自動將其自身形成爲當前設備，並且隨着移動設備在方向之間旋轉，實時移動其位置。

我對這篇文章的最終問題是：我可以在CSS中的媒體查詢中指定某種形式的表達式，它將簡單地比較設備寬度和設備高度，並在寬度大於高度時顯示一種樣式，反之亦然？

是這樣的：

@media屏幕和（裝置寬度>於設備的高度）//真實風景模式

@media屏幕不（裝置寬度>於設備的高度）//真肖像模式或方形屏幕

Answer 1

一些調整和測試後，我想出了媒體查詢以下組合似乎做什麼，我試圖完成。

@media只有屏幕和（取向：橫向）和（最小 - 設備縱橫比：1/1）
//這靶向任何屏幕，是在真正的橫向方向，包括桌面瀏覽器。這也應該以瀏覽器報告橫向方向的方形屏幕爲目標。

@media只有屏幕和（方向：縱向）和（分設備縱橫比：1/1）
//這個目標有調整到什麼樣的瀏覽器窗口嚴格的桌面瀏覽器考慮「肖像」模式。這適用於Chrome，Firefox和MS Edge（未測試其他）。更具體地說，它針對任何報告縱向模式的瀏覽器，但屏幕實際上處於橫向位置。這也可以針對瀏覽器報告縱向方向的方形屏幕。

@media只有屏幕和（方向：縱向）和（MAX-設備縱橫比：1/1）
//這嚴格靶向實際上是在縱向定向裝置，主要的移動設備（儘管它可能以具有旋轉監視器的桌面爲目標）
這也可能會將報告爲縱向模式的方形屏幕作爲目標，因此您可能需要一個額外的查詢來精確定位方形屏幕。