正确的IPad Pro媒体查询 [英] Correct Media Query for IPad Pro

问题描述

我有这两个，但他们没有工作。我在Chrome中模拟

I have these two but they are not working. I'm simulating in Chrome

/* Landscape*/

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

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

如果我删除'和（方向：横向）'那么那里的css有效在第一个媒体查询中。
横向和纵向的正确方向是什么？

If I remove 'and (orientation: landscape)' then the css in there works in the first media query. What is the correct orientation, for both landscape and portrait ?

HTML元设置为

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

推荐答案

/* ----------- iPad Pro ----------- */
/* 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) {

}

I没有iPad专业版，但这适用于Chrome模拟器。

I don't have an iPad Pro but this works for me in the Chrome simulator.

这篇关于正确的IPad Pro媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！