Pourquoi @media Handheld n'est-il pas une solution fiable pour les CSS mobiles ?

Ajustement du CSS pour les appareils mobiles : comprendre les limitations de @media handheld

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

Alternativement, les requêtes de fonctionnalités CSS peuvent être utilisées 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 de candidats du W3C pour les médias Requêtes](https://www.w3.org/TR/css3-mediaqueries/)
• [Guide du développeur Apple's Mobile Webkit](https://developer.apple.com/library/archive/documentation/ AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Une liste à part : concevoir pour plusieurs Fenêtres](https://alistapart.com/article/viewports)

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!