iPad Pro 的正确媒体查询是什么？答案

【问题标题】：What is correct media query for IPad Pro?iPad Pro 的正确媒体查询是什么？
【发布时间】：2023-03-30 17:08:01
【问题描述】：

我有这两个，但它们不起作用。我在 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 在第一个媒体查询中起作用。横向和纵向的正确方向是什么？

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 上没有调用纵向和横向 CSS。如果我删除他们工作的方向
我遇到了类似的问题。 This one 真的帮了我大忙。
谢谢，我收到了大量的 CSS（我不是 UI 图形专家）。我会尝试从您的链接转换 .scss。 CSS 中的方向似乎存在一个普遍问题。我也遇到了 Galaxy Tab 无法识别方向的问题。

标签： css ipad media-queries

【解决方案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 Pro，但这适用于我的 Chrome 模拟器。

【讨论】：

还要小心测试在分屏中运行的 Mobile Safari（如果尝试检测设备，这通常会导致问题！）。
这也将针对 4k 屏幕，例如我的 HP Envy 和不是 iPad Pro 的 Firefox。

【解决方案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 的纵向媒体查询应该没问题。

iPad Pro 的横向媒体查询（最小设备宽度）应为 1366 像素，（最大设备高度）应为 1024 像素。

希望这会有所帮助。

【讨论】：

当我在“ipad pro”的谷歌浏览器模拟器上尝试这个时，这对我不起作用
如果您删除“only”并使用“min-width”而不是“min-device-width”在chrome中不起作用？
哇。这是我认为我见过的唯一一个可以说完美的媒体查询！谢谢。
只需要更正第一个到 - 和 (min-device-width: 1024px) 和 (max-device-height: 1366px) - 并且效果很好。
有效。谢谢@丹尼尔

【解决方案3】：

请注意，有多个 iPad 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... */ }

【讨论】：

【解决方案4】：

我不能保证这将适用于即将发布的每款新 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) {
    /* ... */
}

【讨论】：

【解决方案5】：

这对我有用

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

}

【讨论】：

【解决方案6】：

为时已晚，但愿这能让您免于头痛！这一切都是因为我们要检测目标浏览器是手机！

这是一个移动设备然后将它与 min/max-(width/height)'s 结合起来

所以这似乎可行：

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

如果设备的主要输入机制系统不能轻松悬停在元素上，或者它们可以但不容易（例如执行长触摸以模拟悬停）或根本没有主要输入机制，我们使用 none ！您可以从下面的链接中阅读很多案例。

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

【讨论】：

【解决方案7】：

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

请注意，我添加了一个移动 CSS 查询，用于宽度小于 900 像素的设备；如果需要，请随时将其删除。

这是查询，它结合了横向和纵向，它适用于 12.9"，如果您需要定位 10.5"，您可以简单地添加这些尺寸的查询：

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

     // insert mobile and iPad Pro 12.9" CSS here    
}

【讨论】：

当您有一些重叠的查询时，这对我来说效果最好，

【解决方案8】：

对于那些想要以 iPad Pro 11" 为目标的用户，device-width 是 834 像素，device-height 是 1194 像素，device-pixel-ratio 是 2。来源：screen.width、screen.height 和 devicePixelRatio 由 Safari 报告在 iOS 模拟器上。

纵向的精确媒体查询：(device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

【讨论】：