如何使媒体查询与iPad Pro 12.9一起使用

Question

im使用以下媒体查询来定位iPad Pro 12.9

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

它在浏览器模拟器上工作，但是当我尝试实际设备时，景观视图看起来与常规桌面相同。它在肖像中正常工作，但忽略了景观视图媒体查询。

你们知道一种解决此问题的方法吗？

Answer 1

尝试使用单独的媒体查询。一种用于景观，一个用于肖像，一个用于两者。

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* 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) {
}