Toutes ces réponses listées ci-dessus, qui utilisent max-device-width
ou max-device-height
pour les requêtes média, souffrent d'un bug très fort: elles ciblent également beaucoup d'autres appareils mobiles populaires (probablement indésirables et jamais testés, ou qui arriveront sur le marché à l'avenir).
Ces requêtes fonctionneront pour tout appareil doté d'un écran plus petit et votre conception sera probablement endommagée.
Combinée à des requêtes multimédias similaires spécifiques aux appareils (pour HTC, Samsung, IPod, Nexus ...), cette pratique lancera une bombe à retardement. Pour le débogage, cette idée peut faire de votre CSS un spagetti incontrôlé. Vous ne pouvez jamais tester tous les appareils possibles.
Veuillez noter que la seule requête multimédia ciblant toujours l'iPhone5 et rien d'autre , est:
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Notez que la largeur et la hauteur exactes, et non la largeur maximale, sont vérifiées ici.
Maintenant, quelle est la solution? Si vous souhaitez écrire une page Web qui aura fière allure sur tous les appareils possibles, la meilleure pratique consiste à utiliser la dégradation
/ * motif de dégradation, nous vérifions la largeur de l'écran uniquement, cela changera en passant du portrait au paysage * /
/*css for desktops here*/
@media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
Si plus de 30% des visiteurs de votre site Web proviennent d'un mobile, inversez ce schéma, en proposant une approche axée sur le mobile. Utilisez min-device-width
dans ce cas. Cela accélérera le rendu des pages Web pour les navigateurs mobiles.