Comment puis-je css style différemment entre iPad et iPhone

J'ai un file HTML incorporé que j'utilise pour les pages d'aide de mon application iOS, mais je souhaite que les choses soient différentes lorsque l'affichage est différent sur iPad et iPhone. Après avoir lu beaucoup de choses sur la syntaxe de @media et tout sauf pour la vie de moi, je ne peux pas le faire fonctionner correctement. Étant donné le file HTML montré ci-dessous, pourquoi est-ce que l'on affiche TOUJOURS simplement l'arrière-plan de style iPad (rose) au lieu de l'ajuster en fonction de l'appareil?

<head> <title>Help</title> <meta name="viewport" content="width=device-width"> <style type="text/css"> h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;} /* iphone - GREEN */ @media only screen and (max-device-width : 480px) { body {background-color:#009900;} } /* ipad - PINK */ @media only screen and (max-device-width : 1024px) { body {background-color:#ff8888;} } </style> </head> <body> <br> <h1> I Need Some Help!</h1> </body> 

Le C en CSS signifie «cascade». Vos styles d'iPad écrasent vos styles d'iPhone. Essayez de les changer comme ceci:

 /* ipad - PINK */ @media only screen and (max-device-width : 1024px) { body {background-color:#ff8888;} } /* iphone - GREEN */ @media only screen and (max-device-width : 480px) { body {background-color:#009900;} } 

Quelle est la largeur de la window d'affichage de l'iPhone? 480px?

Dans votre code, vous vérifiez d'abord si la largeur du périphérique est <= 480. Cela renvoie true, de sorte que les styles inclus sont appliqués. Ensuite , votre code vérifie si la largeur du périphérique est <= 1024. 480 est en effet inférieur à 1024, donc les styles inclus sont appliqués.

Il est préférable de ne pas utiliser la propriété max-device-width par elle-même. Utilisez-le avec d'autres propriétés telles que min-device-width pour cibler les périphériques avec précision.

Il est parfois déroutant, mais pour mieux comprendre les choses, la propriété de base spécifiée par W3C est device-width qui est l'écran Largeur de l'appareil (pas la largeur du browser)

min et max sont des préfixes pour exprimer des contraintes "plus grand ou égal à" et "plus petit ou égal à". Cette syntaxe est utilisée pour éviter les caractères "<" et ">" qui peuvent entrer en conflit avec HTML et XML.

En d'autres termes, la device-width interroge et renvoie la largeur des périphériques sous la forme d'un nombre, mais l'utilisation de min et max ne renvoie pas deux nombres fixes représentant les largeurs minimale et maximale des périphériques mais permet de vérifier si la device-width est inférieure ou supérieure. qu'une valeur que vous choisissez.

Donc, dans votre cas, les deux sets s'appliqueront à l'iPhone car la command signifiera que la largeur de l'iPhone sera toujours inférieure à 1024 et 480.

Bien que le changement de l'ordre de vos sets fonctionnerait comme la solution de @JezenThomas, je vous recommand d'essayer ces requêtes média CSS Hardboiled:

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* 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 */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Vous pourriez essayer quelque chose dans ce sens:

 @media only screen and (min-device-width:481px) and (max-device-width : 1024px) { body {background-color:#ff8888; }