Question

我已经为3种类型的设备设置了访问者门户网站：移动设备（宽度小于800px），低分辨率桌面和高分辨率桌面，如下所示：

<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肖像，屏幕宽度小于800px，但选择的样式表是低分辨率桌面。我需要更改什么才能使其正常工作？

编辑（澄清问题）

当我做这样的事情时

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

问题是风格在不同的分辨率下混淆了。我希望它能够在任何时候只有一个样式表处于活动状态。

Answer 1

iPad媒体查询

iPad媒体查询（所有代 - 包括iPad mini）

纵向和iPad的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/

希望这可以帮助你。

谢谢

Answer 2

所以，如果我是你，我会做这样的事情：

＆＃13;

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

＆＃13;

如果您在本文的CSS技巧文章中看到：Media Queries for Standard Devices，您可以非常具体地尝试指出每个设备。或者使用一些这样的例子（可能与orientation: portrait组合）

最后，我想说，就个人而言，我只使用-webkit-min-device-pixel-ratio: 2或-webkit-min-device-pixel-ratio: 3指向高分辨率光栅/位图图像（jpg和png）I＆＃39 ; ll使用。

我希望这有帮助。

您可以在Apple找到有关2x和3x设备的更多信息，以及它如何影响本文中的图像。

其他资源：

MDN Media Queries。
另一个答案（CSS技巧）已经提到：Retina Display Media Query。
我自己已经提到过，还有CSS技巧：Media Queries for Standard Devices
设备和屏幕的比较：A quick reference for iOS devices

更多官方消息来源：

Answer 3

iPad pro有一个视网膜显示器，像素长宽比大约为2，几乎可以达到2 x 800 = 1600像素。这就是所选媒体查询错误的原因。您还必须处理像素长宽比。请参阅：https://css-tricks.com/snippets/css/retina-display-media-query/

Answer 4

此查询适用于所有设备我希望您的问题得到解决。

@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>

Answer 5

您是否在<meta name="viewport" content="width=device-width, initial-scale=1.0">中加入了<head>？我发现这包括这使得视网膜设备表现得像预期的那样没有任何额外的摆弄f-spin提到的2x和3x设备

编辑：请注意，您可能会发现这会影响当前运行良好的布局，但是一旦您克服了（可能非常小）驼峰，整体应该会使媒体查询更具可预测性

Answer 6

据我所知，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">

我认为这会对你有帮助。

Answer 7

此查询适用于所有设备我希望您的问题得到解决。

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

    }

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

7 个答案: