Mozilla媒體查詢移動視圖

Question

嗨，我正在嘗試使我的網站具有響應能力。 現在，我有一個媒體查詢，該查詢可以處理設備的特定屏幕尺寸，但通過Web查看時可以使用不同的樣式。 它在chrome，safari和Opera中都可以正常工作。 但是在mozilla中嘗試時，盡管我正在通過桌面訪問它，但我的媒體查詢似乎仍在執行。 有什么我想念的嗎？ 以下是我的媒體查詢

.my-target-class {
   display: inline;
}

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
      .my-target-class {
          display: block;
       }
}

如您所見，我的目標是分類，如果通過移動設備查看，則顯示會發生變化。 但是在mozilla上查看后，它會運行@media屏幕查詢並在類上應用ng display：塊。 有任何想法或解決辦法嗎？ 如果能解釋為什么它的行為，將不勝感激

正如您在屏幕截圖的右下部分所看到的，它正在應用用於移動設備的css樣式。 盡管我通過桌面瀏覽器訪問它。 我假設如果我放置@media only屏幕，則僅在移動設備上查看時才應用。 但是，Firefox的行為方式似乎有所不同

Answer 1

不要把您的代碼之外。 您必須像這樣包裝桌面的屏幕尺寸

@media screen and (min-device-width: 300px) and (max-device-width: 800px){
  .my-target-class {
      display: block;
   }
}
@media screen and (min-device-width: 801px) {
  .my-target-class {
      display: inline;
   }
}