css - 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) {
}

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

• CSS Media Queries for iPad Pro

• Correct Media Queries for iPad Pro

• iPad specific CSS

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

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) {

}