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代码，不仅仅是iphone5代码或Iphone4代码。

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查询不是一个好主意。

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

1 个答案: