移动友好网站-应用良好的分辨率

Question

网站是非常好的转换为iphone: 1-4和其他相同分辨率的手机，但如果我添加到iphone5的元标记代码，以前的代码不工作，所有的手机工作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" />

可能就是你想要的。有重叠的Media CSS查询不是一个好主意。