如何定位 dppx 大于 2 但小于 3 的设备 [重复]

Posted 2023-03-06

【中文标题】如何定位 dppx 大于 2 但小于 3 的设备 [重复]

【英文标题】：How to target a device with a dppx larger than 2 but smaller than 3 [duplicate]

【发布时间】：2016-05-14 08:25:55

【问题描述】：

我正在尝试为像素比为 2dppx 的设备应用一些 CSS 规则，而为像素比为 3dppx 或更高的设备应用一些其他规则。

由于我只针对小型设备（手机和平板电脑，但没有视网膜笔记本电脑或电视），我有一个围绕其他两个的最大宽度媒体查询。 （已编辑：删除此媒体查询并不能解决问题）。

@media only screen and (max-width: 40em) 

    @media screen and (min-device-pixel-ratio: 2dppx) and (max-device-pixel-ratio: 2.9dppx)
        $base-font-size: 150%;
    
    @media screen and (min-device-pixel-ratio: 3dppx) 
        $base-font-size: 180%;
    

但是当我在我的 iPhone 5s（使用 2dppx）上运行网络时，我可以看到 base-font-size 等于 180%，所以它似乎采用了错误的样式。为什么会这样？

【参考方案1】：

我在这里可能完全错了，但我不认为你应该使用dppx 和min-device-pixel-ratio，你应该写成：

@media only screen and (max-width: 40em) 

    @media screen and (min-device-pixel-ratio: 2) and (max-device-pixel-ratio: 2.9)
        $base-font-size: 150%;
    
    @media screen and (min-device-pixel-ratio: 3) 
        $base-font-size: 180%;
    

或者，更明确地说，尝试使用resolution 属性：

@media only screen and (max-width: 40em) 

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx)
        $base-font-size: 150%;
    
    @media screen and (min-resolution: 3dppx) 
        $base-font-size: 180%;
    

编辑：您可能需要附加供应商前缀，如下所示：

@media only screen and (max-width: 40em) 

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx), screen and (-webkit-min-resolution: 2dppx) and (-webkit-max-resolution: 2.9dppx)
        $base-font-size: 150%;
    
    @media screen and (min-resolution: 3dppx), screen and (-webkit-min-resolution: 3dppx) 
        $base-font-size: 180%;
    

【讨论】：

根据MDN 看来你是对的！但是我修改了我的代码，但没有任何改变，事实上，根据 Chrome 模拟器，每台设备无论其分辨率如何都采用最后的样式并将 $base-font-size 设置为 180%;

出于好奇，当您将包装媒体查询（最大宽度：40em）完全取出并仅使用它们自己的分辨率查询时会发生什么？结果一样吗？ @ithil

是的，结果相同，我将编辑问题以反映这一点

@ithil 供应商前缀怎么样？尝试使用-webkit-min-resolution等

【参考方案2】：

好吧，看来问题可能不在于媒体查询本身，而在于无法在媒体查询中更新 Sass 变量，正如其他 *** question 中所述。 p>

从接受的答案中，我引用“这根本不可能。因为触发@media screen and (max-width: 1170px) 发生在客户端。”。

所以我会尝试重写我的代码以避免媒体查询中的变量发生变化。

【讨论】：

啊，我也在那里学到了一些新东西！谢谢。

如果您的问题与另一个问题重复，则应将其作为重复问题关闭。发布指向另一个答案的答案是非常不合适的。

【参考方案3】：

不要使用min-device-pixel-ratio，而是尝试使用min-resolution。

@media only screen and (max-width: 40em) 

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx)
        $base-font-size: 150%;
    
    @media screen and (min-resolution: 3dppx) 
        $base-font-size: 180%;
    

在此处查看解决方案部分：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

感谢 Jordan，请看一下 cmets 给@David-Wilkinson 的回答

@ithil 只是为了好玩，您可以尝试使用 -webkit-min-device-pixel-ratio 看看它是否有效？