与 iPhone 媒体查询冲突。 “X”媒体查询覆盖“Y”

Question

“X”媒体查询覆盖“Y”例如

  /* ----------- iPhone 4 and 4S ----------- */
    @media (min-width: 320px) and (max-width: 480px){ 
    header{ height:480px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 4";}
    }
    /* ----------- iPhone 5 and 5S ----------- */
    @media (min-width: 320px) and (max-width: 568px){
    header{ height:599px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 5";}
    }

我尝试添加设备纵横比来解决问题，但没有奏效。

有人知道答案吗？

未来如何在新设备上避免这种情况？

Answer 1

第一个查询询问窗口宽度（实时）是否在 320-480 之间。因此，如果我使用实时窗口宽度为 400 像素的设备加载您的页面 - 查询变为真，因此将应用相应的 css。

但是，如果在第二个查询中使用相同的设备 - 该查询也将是正确的，因为 400-width-device 也适合 320-568 范围内。

我不知道您想要完成什么场景，但一种方法是不要尝试针对单个设备。示例：您可以为跨度 ..301-350、351-400、401-450...（等等）设置唯一的 css。这样，单个宽度仅适​​合一个跨度。此外，进入市场的新设备将自动“选择”其中一个跨度。