与iPhone媒体查询冲突。 ＆＃34; X＆＃34;媒体查询覆盖＆＃34; Y＆＃34;

Question

＆＃34; X＆＃34;媒体查询覆盖＆＃34; Y＆＃34;例如

  /* ----------- 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之间。因此，如果我使用实时窗口宽度为400px的设备加载页面 - 查询变为true，则将应用相应的css。

但是，如果在第二个查询中使用相同的设备 - 该查询也是如此，因为400宽度设备也适合320-568范围。

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