检测并链接 iphone 3 和 iphone 4 的不同样式表

Question

我试图通过这种方式为 iphone 3 和 iphone 4 定义不同的样式表

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="all and (max-device-width: 320px)" href="iphone3.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px)" href="iphone4.css" />

，并且 iphone3.css 和 iphone4.css 都有一个 body{display:none;} 来测试它们是否正常工作，但在我的 iphone4 中我仍然可以看到网站，

我错过了什么？

谢谢！

Answer 1

这将同时针对 iPhone 3 和 4：

@media only screen and (max-device-width: 480px){
    body{background:red;}
}

或者

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone3.css" />

您可以使用此查询覆盖以前的样式并仅针对 iPhone 4：

@media only screen and (-webkit-min-device-pixel-ratio: 2){
    body{background:blue;}
}

或者

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css" />

Answer 2

@media only screen and (max-width: 480px){
    body{background:red;}
}