ios - iphone 4s 的媒体查询被用于 Iphone 6

Question

我有这个简单的 CSS block :

    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {  // iphone 6
      color: red;
    }
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) {  //iphone 4S
      color: blue;
    }

在 iphone 6 上运行时，颜色是...蓝色。
(我没有在其他地方定义颜色属性)。

为什么？

Answer 1

iPhone 6 向纵向浏览器报告的宽度为 375 像素。这意味着，您的第一个颜色规则被第二个颜色规则覆盖，因为浏览器报告的分辨率通过了该媒体查询。 (介于 320px 和 480px 之间。)

由于您的媒体查询重叠，最后一个将用于通过两个媒体查询的浏览器。