媒体查询：智能手机的格局正在为iPad

Question

执行我有CSS媒体查询这样

<!-- Common Styles sheet for desktops/tablets/iPads --> 
<link rel="stylesheet" href="css/styles.css" /> 
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" /> 

<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" /> 
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" /> 

的问题是，智能手机landscape.css文件也被执行为iPad。我怎样才能防止它？所以智能手机风景只适用于iPhone的landsacpe模式（以及类似分辨率的设备），但不适用于iPad。

Answer 1

参考Chris Coyer的一篇文章，这里是一些特定的CSS代码，只针对iPad和智能手机与媒体查询。

对于为文章全文：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

注为iPad只查询特定的 “设备” 参考：

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

所以你的情况：

<!-- Common Styles sheet for desktops/tablets/iPads --> 
<link rel="stylesheet" href="css/styles.css" /> 
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" /> 
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" /> 
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" /> 

Answer 2

你将不得不重新在智能手机.css中写入之后，应用ipad-landscape.css中的样式表。