CSS iPad Pro 的正确媒体查询是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41978487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is correct media query for IPad Pro?
提问by Rory
I have these two but they are not working. I'm simulating in Chrome
我有这两个，但它们不起作用。我在 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) {}
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 ?
如果我删除 'and (orientation: Landscape)' 然后那里的 css 在第一个媒体查询中工作。横向和纵向的正确方向是什么？
The HTML meta is set as
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" />
回答by nykon333
/* ----------- 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) {
}
I don't have an iPad Pro but this works for me in the Chrome simulator.
我没有 iPad Pro，但这在 Chrome 模拟器中对我有用。
回答by Daniel T.
/* 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) {}
Portrait medias query for iPad Pro should be fine as it is.
iPad Pro 的纵向媒体查询应该没问题。
Landscape media query for iPad Pro (min-device-width) should be 1366pxand (max device-height) should be 1024px.
iPad Pro 的横向媒体查询 (min-device-width) 应该是1366px并且 (max device-height) 应该是1024px。
Hope this helps.
希望这可以帮助。
回答by STrunkett
This worked for me
这对我有用
/* 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)
{
}
回答by Jubal Lindsey
Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.
请注意，有多个 iPad Pro，每个都有不同的视口：通过 Chrome 开发人员工具模拟 iPad Pro 时，iPad Pro (12.9") 是默认选项。如果您想模拟其他 iPad Pro (10.5 “或 9.7”）具有不同的视口，您需要添加具有正确规格的自定义模拟设备。
You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.
您可以在以下位置搜索设备、视口及其各自的 CSS 媒体查询：http: //vizdevices.yesviz.com/devices.php。
For instance, the iPad Pro (12.9")would have the following media queries:
例如，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... */ }
Whereas the iPad Pro (10.5")will have:
而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... */ }
回答by ?α??Σ?О-MaMrEzO
Too late but may this save you from headache! All of these is because we have to detect the target browser is a mobile!
为时已晚，但这可能会使您免于头痛！这一切都是因为我们要检测目标浏览器是手机！
Is this a mobile then combine it with min/max-(width/height)'s
这是一个移动设备然后将它与最小/最大-（宽度/高度）相结合
So Just this seems works:
所以这似乎有效：
@media (hover: none) {
/* ... */
}
If the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none! There are many cases that you can read from bellow links.
如果设备的主要输入机制系统不能轻松地悬停在元素上，或者它们可以但不容易（例如执行长触摸来模拟悬停），或者根本没有主要输入机制，我们不使用！您可以从以下链接中阅读许多案例。
Described as wellAlso for browser Support See this from MDN
回答by Skoua
I can't guarantee that this will work for every new iPad Pro which will be released but this works pretty well as of 2019:
我不能保证这适用于将发布的每款新 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) {
/* ... */
}
回答by frenchie
I tried several of the proposed answers but the problem is that the media queries conflicted with other queries and instead of displaying the mobile CSS on the iPad Pro, it was displaying the desktop CSS. So instead of using max and min for dimensions, I used the EXACT VALUESand it works because on the iPad pro you can't resize the browser.
我尝试了几个建议的答案，但问题是媒体查询与其他查询冲突，而不是在 iPad Pro 上显示移动 CSS，而是显示桌面 CSS。因此，我没有使用 max 和 min 作为尺寸，而是使用了EXACT VALUES并且它有效，因为在 iPad pro 上您无法调整浏览器的大小。
Note that I added a query for mobile CSS that I use for devices with less than 900px width; feel free to remove it if needed.
请注意，我添加了一个移动 CSS 查询，用于宽度小于 900 像素的设备；如果需要，请随意删除它。
This is the query, it combines both landscape and portrait, it works for the 12.9" and if you need to target the 10.5" you can simply add the queries for these dimensions:
这是查询，它结合了横向和纵向，适用于 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
}
回答by salomvary
For those who want to target an iPad Pro 11" the device-widthis 834px, device-heightis 1194px and the device-pixel-ratiois 2. Source: screen.width, screen.heightand devicePixelRatioreported by Safari on iOS Simulator.
对于那些谁想要的目标一个iPad临11"的device-width为834px，device-height为1194px而device-pixel-ratio为2.资料来源：screen.width，screen.height并devicePixelRatio报告了Safari浏览器在iOS模拟器。
Exact media query for portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)
肖像的确切媒体查询： (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)
