媒體查詢：如何使用 css 媒體查詢定位 1024 以下的所有橫向設備

Question

如何使用 css 媒體查詢定位低於 1024 的所有橫向設備這應該僅適用於移動設備而不適用於桌面瀏覽器

Answer 1

你可以這樣試試

@media only screen 
  and (min-device-width: 1024px)
  and (min-device-pixel-ratio : 2.0)
  and (orientation: landscape) {

  //styles here

}

Answer 2

在下面的媒體查詢 CSS 將影響最大寬度為 1024 像素的設備。 這意味着屏幕寬度小於 1024px 的設備將受到此影響。

 @media screen and ( max-width :1024px) and (min-device-pixel-ratio : 2.0)
     and (orientation: landscape){
       .your_CSS_Class{

          //your styles

      }
    }

Answer 3

@media only screen 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

    //your styles

}