iPad Pro 12.9 的横向媒体查询不起作用

Question

我使用了下面的媒体查询CSS代码，但在iPad Pro 12.9中它以某种方式不起作用。下面是代码：

/* Landscape */
@media only screen
   and (min-device-width : 1024px)
   and (max-device-width : 1366px)
   and (orientation : landscape) {
}
/* Landscape */
@media only screen
   and (min-device-width: 1024px)
   and (max-device-width: 1366px)
   and (orientation: landscape)
   and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
 @media only screen and (min-device-width: 1366px) 
     and (max-device-height: 1024px) 
     and (-webkit-min-device-pixel-ratio: 2) 
     and (orientation: landscape) {
}

我

参考了以下解决方案，但不知何故它对我不起作用。

• 适用于 iPad Pro 的 CSS 媒体查询

• 适用于 iPad Pro 的正确媒体查询

• iPad 特定 CSS

有人可以在这里帮助我使这个对iPad Pro 12.9英寸有效吗？

Answer 1

试试这个

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

Answer 2

试试这个

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