Mobile site Web - Appliquer une bonne résolution

Site Web est très agréable converti pour iPhone: 1-4 et le reste des téléphones mobiles avec la même résolution, mais si j'ajoute au code metatags pour Iphone 5, le code précédent ne fonctionne pas et pour tous les téléphones fonctionnent code iphone5.Mobile site Web - Appliquer une bonne résolution

Mon code:

<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" />

Comment je peux faire les deux codes ne fonctionnent pas? Pas seulement le code iphone5, ou le code Iphone4 en supprimant le code iphone5.

Source

2013-04-08 Lethysek

<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" />

Est probablement ce que vous voulez. Ce n'est pas une bonne idée d'avoir des requêtes CSS Media qui se chevauchent.

Source

2013-04-08 18:01:30

"Ce n'est pas une bonne idée d'avoir chevauchement des requêtes CSS Media" <- dit qui? – cimmanon

@cimmanon Eh bien cette question montre probablement que cela ne fonctionne pas :) –

C'est probablement parce que l'exemple iPhone5 est le dernier dans les codes qui se chevauchent, donc parce que le css complet est dans chacun, il remplace l'iPhone 1-4. @Lethysek Essayez d'échanger les deux segments (iPhone 4 et 5) et de voir si le problème s'intervertit aussi. –

Mobile site Web - Appliquer une bonne résolution

Répondre

Questions connexes