媒體查詢：智能手機的格局正在爲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中的樣式表。