Question

我有这两个，但他们没有工作。我在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)  {}

如果我删除＆＃39;和（方向：横向）＆＃39;那么那里的css在第一个媒体查询中工作。横向和纵向的正确方向是什么？

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" />

Answer 1

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

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

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

}

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

Answer 2

/* Landscape*/

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

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

iPad Pro的Portrait medias查询应该没问题。

iPad Pro（最小设备宽度）的横向媒体查询应 1366px 且（最大设备宽度） 1024px 。

希望这有帮助。

Answer 3

这对我有用

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

}

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

}

Answer 4

请注意，有多个iPad Pro，每个Pro具有不同的视口：通过Chrome开发人员工具模拟iPad Pro时，iPad Pro（12.9“）是默认选项。如果要模拟另一个iPad具有不同视口的专业人士（10.5“或9.7”），您需要添加具有正确规格的自定义仿真设备。

您可以在http://vizdevices.yesviz.com/devices.php上搜索设备，视口及其各自的CSS媒体查询。

例如， iPad Pro（12.9英寸）将具有以下媒体查询：

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

iPad Pro（10.5“）具有：

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }

Answer 5

为时已晚，但这也许可以使您免于头痛！所有这些都是因为我们必须检测到目标浏览器是移动设备！

这是移动设备，然后将其与最小/最大-（宽度/高度）的

结合吗？

所以这似乎可行：

@media (hover: none) {
    /* ... */
}

如果设备的主输入机制系统无法轻松地将鼠标悬停在元素上，或者它们不能但不容易（例如，通过长时间触摸来模拟悬停），或者根本没有主输入机制，则我们不使用！您可以从波纹管链接中读取很多情况。

Described as well也在浏览器支持See this from MDN

Answer 6

我尝试了几个建议的答案，但是问题是媒体查询与其他查询冲突，而不是在iPad Pro上显示移动CSS，而是在显示桌面CSS。因此，我使用了 EXACT VALUES （精确值）来代替尺寸的最大值和最小值，它可以工作，因为在iPad Pro上您无法调整浏览器的大小。

请注意，我添加了针对移动CSS的查询，该查询用于宽度小于900像素的设备；随时将其删除。

这是查询，它将风景和肖像结合在一起，适用于12.9“，如果您需要定位10.5”，则只需添加以下尺寸的查询即可：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:name="dark_triangle"
        android:fillColor="#5ad0e6"
        android:pathData="M 10,0 L 0,100 100,100 z" />

    <path
        android:name="light_triangle"
        android:fillColor="#5ad0e6"
        android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>

Answer 7

对于那些想要定位iPad Pro 11的用户，device-width为834px，device-height为1194px，device-pixel-ratio为2。来源：screen.width，{{ Safari在iOS Simulator上报告了1}}和screen.height。

精确的媒体查询肖像：devicePixelRatio

Answer 8

我不能保证这将适用于将要发布的每个新iPad Pro，但是从2019年开始效果很好：

@media only screen and (min-width: 1024px) and (max-height: 1366px)
    and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    /* ... */
}

正确的IPad Pro媒体查询

8 个答案: