Pourquoi cette requête médiatique ne frappe-t-elle pas la rétine?
-
02-01-2020 - |
Question
Je me débats avec une requête médiatique en essayant de cibler des écrans de rétine. J'ai eu cette requête médiatique;
@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}
dans chrome canary devtools, il obtient le style mais le teste sur un affichage réellement de rétine (iPhone 5S dans ce cas) ne le fait pas.
J'utilise aussi cette fenêtre de vue afin qu'il échoue tout, j'ai essayé de le supprimer, mais cela n'a pas fait de différence dans mon problème ci-dessus.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">
Des idées sur la raison pour laquelle j'ai ce problème?
La solution
Essayez cette requête médiatique, elle fonctionne
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx){
//your css goes here..
}
modifie également la fenêtre
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow