Porque não esta consulta de mídia bater retina?
-
02-01-2020 - |
Pergunta
Eu estou lutando com uma consulta de mídia tentando alvo telas retina.Eu tenho essa consulta de mídia;
@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}
No google Chrome Canary Devtools que faz o estilo, mas testando-o sobre a tela retina da apple (iphone 5s, neste caso) não.
Eu também uso esta janela de visualização para que as escalas de tudo, eu tentei removê-lo, mas ele não faz qualquer diferença no meu problema acima.
<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">
Alguma idéia de por que eu tenho esse problema?
Solução
Tente essa consulta de mídia, ele funciona
@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..
}
Também mudar o visor
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow