0
I’m trying to make use of media query for retinal monitor (Macbook pro), but I can’t get the code to be considered by the browser at all, I tried several ways, considering the link.
The meta tag of viewport is like this:
meta content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no" name="viewport"
I tried so:
@media only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 1.5dppx) {
I tried that way too:
@media only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 1.5dppx) {
And various other forms exposed in link.
Anyone can help?
Man I would make the meta tag very simple
<meta name="viewport" content="width=device-width, initial-scale=1">because it is the media query that will treat this in my view (the scale is 1 to 1 independent of dpi believe). And test with simpler rules like@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { suas classes }I put the prefix vendor -Webkit- because Safari is Webkit and I think so far sa Apple has this retina thing on the panels– hugocsl
@hugocsl, thanks man, but unfortunately it didn’t work. I changed meta viewport as you suggested and nothing changed, and tried tb simple rules for @media, for example:
@media (min-device-pixel-ratio: 1.5){...} @media (min-device-pixel-ratio: 2){...}. I don’t understand, I found several, but several examples, and they all show more or less the same thing, but no going into @media, I looked at the rendered CSS, and in one go-to @media...rsrs Thanks anyway man, I have to deliver this project this week, I need to find a way!– Quati_Maldito
Dude, unfortunately, I don’t have a retinal monitor to run some tests to help you... so I’m gonna owe you for this one, so... Try to get a code ready to test and see if it works. Check also the configs of your monitor if it is in "retina mode" or something like
– hugocsl