設備方向更改時未拾取CSS樣式

當用戶在其設備上處於橫向模式時，我有以下CSS來設置佈局樣式。它在橫向模式下加載頁面時，但在以縱向模式加載頁面並更改方向時有效。肖像佈局仍然在風景中。設備方向更改時未拾取CSS樣式

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

     .qv-overlay-container{ 
      top:0px; 
     } 
......... 

}

我該如何解決這個問題？

來源

2015-02-24 user1937021

不要ü有任何特定的設備上這個問題呢？ – Vishwanath 2015-02-24 11:35:27

安卓和IOS – user1937021 2015-02-24 11:48:44

你可以用HTML和CSS在這裏創建代碼片段，以便它可以更詳細地調試... – Vishwanath 2015-02-24 11:57:47

嘗試使用

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px), 
(orientation : landscape) {...}

說明

的 '和' 關鍵字在這裏使用組合多個媒體功能一起，以及相結合的媒體功能與媒體類型。如果媒體類型是屏幕

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) {...}

上述媒體查詢將只應用中，視口是寬度是667px 320像素之間，並且所述顯示器是在景觀。

逗號分隔的列表行爲類似於在媒體查詢中使用的邏輯運算符，或者當。當使用逗號分隔的媒體查詢列表時，如果任何媒體查詢返回true，則會應用樣式或樣式表。逗號分隔列表中的每個媒體查詢都被視爲單個查詢，並且應用於一個媒體查詢的任何運算符都不會影響其他媒體查詢。這意味着逗號分隔的媒體查詢可以針對不同的媒體功能，類型和狀態。

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px), 
(orientation : landscape) {...}

以上，如果與視口寬度屏設備是 667px 320像素之間，媒體語句會因爲第一部分， interperated如@media屏幕和（最小 - 設備寬度返回true： 320px）和（max-device-width：667px）將適用於設備，因此返回true，儘管我的屏幕設備將在第二個媒體查詢中失敗橫向方向檢查。同樣，如果設備處於橫向寬度爲 800px的橫向，而第一個媒體查詢將由於視口寬度而失敗，則第二個媒體查詢將成功，因此媒體語句將返回true。

Source

來源

2015-02-24 14:05:17 4dgaurav

設備方向更改時未拾取CSS樣式

回答

相關問題