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

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

2 个答案: