移動友好網站 - 應用良好的分辨率

Question

網站是非常好的轉換爲iPhone：1-4和其他手機具有相同的分辨率，但如果我添加到iPhone 5的元標籤代碼，以前的代碼不工作，併爲所有電話工作iphone5的代碼。

我的代碼：

<link media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait)" href="wp-content/themes/chomacki/css/iphone4-portrait.css" type= "text/css" rel="stylesheet" />  
    <link media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape)" href="wp-content/themes/chomacki/css/iphone4-landscape.css" type= "text/css" rel="stylesheet" /> 

    <link media="only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)" href="wp-content/themes/chomacki/css/iphone5-portrait.css" type= "text/css" rel="stylesheet" />  
    <link media="only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)" href="wp-content/themes/chomacki/css/iphone5-landscape.css" type= "text/css" rel="stylesheet" /> 

我怎麼可以讓兩個代碼工作？不只是iphone5代碼，或iphone4代碼刪除iphone5代碼。

Answer 1

<link media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait)" href="wp-content/themes/chomacki/css/iphone4-portrait.css" type= "text/css" rel="stylesheet" />  
<link media="only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape)" href="wp-content/themes/chomacki/css/iphone4-landscape.css" type= "text/css" rel="stylesheet" /> 

<link media="only screen and (min-device-width : 481px) and (max-device-width : 568px) and (orientation : portrait)" href="wp-content/themes/chomacki/css/iphone5-portrait.css" type= "text/css" rel="stylesheet" />  
<link media="only screen and (min-device-width : 481px) and (max-device-width : 568px) and (orientation : landscape)" href="wp-content/themes/chomacki/css/iphone5-landscape.css" type= "text/css" rel="stylesheet" /> 

可能是你想要的。重疊媒體CSS查詢不是一個好主意。