媒体查询在 iPad Pro 上无法正常工作
Posted
技术标签:
【中文标题】媒体查询在 iPad Pro 上无法正常工作【英文标题】：Media query not working as expected on iPad Pro 【发布时间】：2018-07-04 13:08:39 【问题描述】：我已经为 3 种类型的设备设置了访问者门户：移动设备（宽度小于 800 像素）、低分辨率桌面和高分辨率桌面，如下所示：
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." type="text/css">
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
这一切都很好，但对于 iPad Pro 纵向，屏幕宽度小于 800 像素，但选择的样式表是低分辨率桌面。我需要进行哪些更改才能使其正常工作？
编辑（澄清问题）
当我做这样的事情时
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
<link media ="only screen and (max-width: 800px),
only screen and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:portrait),
only screen and (max-device-height:1366px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:landscape)"
href="..." rel ="stylesheet" type="text/css">
问题在于样式在不同的分辨率下会混淆。我希望让它工作，以便在任何时候只有一个样式表处于活动状态。
【问题讨论】：
你指定视口大小了吗？ @MunimMunna: 你可以使用https://mydevice.io/查看ipad显示的宽度。 您正在使用视口meta 标签。澄清一下，physical size 与CSS size 不同。 Apple iPad Pro 9.7 CSS size is : 768 - 1024px Apple iPad Pro: 1024 - 1366px 来源：mydevice.io/devices 你能创建一个实例或提供地址吗？哪个 CSS 文件应该在 Ipad Pro 上处于活动状态，第二个（低分辨率桌面）？
【参考方案1】：
此查询适用于所有设备我希望您的问题得到解决。
/*---------------------------------------------------------------------
Large Desktops
-----------------------------------------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1200px)
/*---------------------------------------------------------------------
Desktops
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px)
/*---------------------------------------------------------------------
Tablets Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px)
/*----------------------------------------------------------------------
Mobile Devices
------------------------------------------------------------------------*/
@media only screen and (min-width: 360px) and (max-width: 479px)
/*----------------------------------------------------------------------
Small Screen Mobile Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 359px)
【讨论】：
【参考方案2】：据我所知，iPad Pro 的分辨率为 (1024x1366)px，iPad Pro9.7 的分辨率为 (768x1024)px。因此，如果您想为特定分辨率加载特定样式表，那么您可能会加载
的样式表<link media="only screen and (min-width: 768px) and (max-width: 1199px)" href="..." rel="stylesheet" type="text/css">
我想这会对你有所帮助。
【讨论】：
【参考方案3】：iPad 媒体查询
iPad 媒体查询（所有代 - 包括 iPad mini）
iPad 纵向和横向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) /* STYLES GO HERE */
iPad 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) /* STYLES GO HERE */
iPad 纵向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) /* STYLES GO HERE */
了解更多关于设备媒体查询，请访问Stephen.io/mediaqueries 来源学分http://stephen.io/mediaqueries/
希望对你有所帮助。
谢谢
【讨论】：
【参考方案4】：您是否将<meta name="viewport" content="width=device-width, initial-scale=1.0"> 包含在您的<head> 中？我发现包含这使得视网膜设备的行为符合预期，而无需对 f-spin 提到的 2x 和 3x 设备进行任何额外的摆弄
编辑：请注意，您可能会发现这会影响当前运行良好的布局，但总体而言，一旦您克服了（可能非常小的）驼峰，媒体查询应该会更加可预测
【讨论】：
【参考方案5】：所以，如果我是你，我会这样做：
<!-- small devices non-retina (apple use 2x for ipads and 3x for the newest iphones) -->
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">
<!-- small devices retina (apple use 2x and 3x) -->
<link
media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 800px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min-resolution: 192dpi) and (max-width: 800px),
only screen and (min-resolution: 2dppx) and (max-width: 800px)"
href="..." rel="stylesheet" type="text/css">
<!-- bigger devices low-res -->
<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<!-- bigger devices higher res -->
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css"> 如果您在这篇 CSS 技巧文章中看到：Media Queries for Standard Devices，您可以非常具体地尝试指向每个设备。或者使用其中的一些示例（可能与orientation: portrait 结合使用）
最后我想说的是，就我个人而言，我只使用-webkit-min-device-pixel-ratio: 2 或-webkit-min-device-pixel-ratio: 3 来指向我将使用的高分辨率光栅/位图图像（jpg 和png）。
希望对你有所帮助。
您可以在Apple 的这篇文章中找到有关 2x 和 3x 设备以及这如何影响图像的更多信息。
其他资源：
MDN Media Queries。 另一个答案（CSS 技巧）已经提到：Retina Display Media Query。 已经自己提过，还有CSS Tricks：Media Queries for Standard Devices 设备和屏幕对比：A quick reference for ios devices更多官方来源：
W3C Recommendation 19 June 2012 - Media Queries - Resolution Apple's Safari Web Content Guide - Optimizing Web Content 安卓的Supporting Multiple Screens【讨论】：
在 Chrome 模拟器中试过这个，不起作用，只使用高分辨率文件。将在本机 iPad Pro 上试用。 您也可以使用 xcode 模拟器：developer.apple.com/library/content/documentation/IDEs/...。而且您必须查看您使用的是哪个 ipad（在最大宽度上指向正确的值）。正如我所说，你会喜欢看CSS Tricks 的文章。专门针对肖像，它说：为最小和最大宽度声明相同的值以避免与桌面冲突 Source【参考方案6】：此查询适用于所有设备我希望您的问题得到解决。
@media only screen and (max-width:767px)
.big-dot
width:280px; height:280px; margin:0 auto; background:red;
/*===========Mobile Device=============*/
@media only screen and (min-width:768px) and (max-width:1280px)
.big-dot
width:280px; height:280px; margin:0 auto; background:green;
/*===========Tab and IPad Pro Device=============*/
@media only screen and (min-width:1280px)
.big-dot
width:280px; height:280px; margin:0 auto; background:cyan;
/*===========Large Desktop Device=============*/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="big-dot">
Time Big Dot /.....
</div>
</body>
</html>
【讨论】：
【参考方案7】：iPad pro 具有视网膜显示屏，像素纵横比可能为 2，这实际上是 2 x 800 = 1600 像素。这就是为什么选择的媒体查询是错误的。您还必须处理像素纵横比。看到这个：https://css-tricks.com/snippets/css/retina-display-media-query/
【讨论】：
以上是关于媒体查询在 iPad Pro 上无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
高度媒体查询在带有 Safari 的 iPhone 6 上无法正常工作