Ipad Pro 12.9 如何使媒体查询工作

Question

我正在使用以下媒体查询来定位 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) {

}

Ipad Pro 12.9 如何使媒体查询工作

How make Media query work with Ipad Pro 12.9

css

ipad

ios

media-queries