Ajustement du CSS pour les appareils mobiles : comprendre les limitations de l'ordinateur de poche @media

Lorsque vous essayez de personnaliser le CSS spécifiquement pour les navigateurs mobiles comme l'iPhone et Android, il est essentiel d'être conscient du limitations de l’ordinateur de poche @media. Bien que ce type de requête multimédia ait été utilisé dans le passé, il n'est pas universellement pris en charge sur les appareils mobiles, en particulier ceux dotés de fonctionnalités d'affichage avancées.

Pour obtenir l'effet souhaité, envisagez d'autres approches :

Utiliser Requêtes d'écran @media

Au lieu de l'ordinateur de poche @media, utilisez des requêtes d'écran @media. Ces requêtes vous permettent de cibler des appareils en fonction de caractéristiques d'écran spécifiques, telles que la résolution et la largeur de l'appareil. Par exemple, pour styliser une page Web pour un iPhone :

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

Exploiter les requêtes de fonctionnalités CSS

Vous pouvez également utiliser des requêtes de fonctionnalités CSS pour détecter des fonctionnalités spécifiques du navigateur. Par exemple, pour vérifier si les requêtes multimédias sont prises en charge :

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

Ciblage de la résolution des appareils

Pour cibler les appareils avec des résolutions spécifiques, les requêtes @media peuvent être combinées avec la fonctionnalité de résolution multimédia :

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

Ressources supplémentaires

• [Recommandation des candidats du W3C pour les requêtes multimédias](https://www.w3.org/TR/css3-mediaqueries/)
• [Développeur de Webkit mobile d'Apple Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Une liste à part : conception pour plusieurs fenêtres](https : //alistapart.com/article/viewports)