媒体查询在 iPad Pro 上无法正常工作答案

【问题标题】：Media query not working as expected on iPad Pro媒体查询在 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 上处于活动状态，第二个（低分辨率桌面）？

标签： css ipad media-queries

【解决方案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

更多官方来源：

【讨论】：

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

【讨论】：