Comment personnaliser CSS pour les appareils mobiles : l'ordinateur de poche @media est-il toujours pertinent ?

Personnalisation CSS des appareils mobiles :

De nombreux développeurs Web rencontrent des difficultés lors de la personnalisation du CSS pour les appareils portables tels que les iPhones et les téléphones Android. La méthode conventionnelle d'utilisation de l'ordinateur de poche @media ne fonctionne pas de manière uniforme sur tous les appareils.

Solution : utilisez les requêtes @media

Pour surmonter cette limitation, utilisez les requêtes @media. Cette technique CSS vous permet de cibler des caractéristiques spécifiques de l'appareil, notamment la taille de l'écran :

<link rel="stylesheet" href="iphone.css" media="only screen and (max-device-width:480px)" />

Cette requête cible spécifiquement les appareils avec une largeur d'écran maximale de 480 px, ce qui couvre généralement les iPhones.

iPhone à titre d'exception

Les navigateurs iPhone, alimentés par Safari, n'honorent pas l'ordinateur de poche @media en raison de leurs capacités avancées de rendu CSS. Cela peut varier selon les anciennes versions d'iOS.

Cibler les appareils avec des résolutions plus élevées

Certains appareils mobiles plus récents, tels que le Droid X, offrent des résolutions plus élevées. Pour prendre en charge ces appareils, utilisez des requêtes @media plus spécifiques qui intègrent une résolution d'écran :

<link rel="stylesheet" href="shetland.css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" />

Lectures complémentaires :

• [Une liste à part : requêtes multimédias pour une conception Web réactive](https://alistapart.com/article/responsive-web-design)
• [Recommandation du candidat W3C pour les requêtes multimédias](https://www.w3.org/TR/css3-mediaqueries/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!