与 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";}
    }

我尝试添加device-aspect-ratio来解决这个问题，但是没有成功。

有人知道答案吗?

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

Answer 1

第一个查询询问窗口宽度(实时)是否在320-480之间。所以，如果我用一个实时窗口宽度为400px的设备加载你的页面，这个查询就变成了真的，因此相应的css将被应用。

但是，如果在第二个查询中使用相同的设备-该查询也将为真，因为400-width的设备也适合320-568的跨度。

我不知道你想要完成什么场景，但一种方法是不要试图瞄准单个设备。示例:您可以为span设置唯一的css ..301-350、351-400、401-450……(以此类推)。这样，单一宽度只适用于一个跨度。此外，进入市场的新设备将自动"选择"其中一个跨度。