0

I am having some issues with media queries. They're just not working. I have a pretty blank site right now - it's just one page with one img in it.

This question is related to this one, but is not a duplicate.

In my previous question, I was unable to get the image to center horizonally on the page when the max-width was 480px.

The code I was using:

@media (max-width: 480px)
{
    img
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

Now, I have managed to solve that - partially - by adding:

<meta name="viewport" content="width=device-width" />

to the head section of the document. But now, on a different phone which has a width of 1280px, the img still centers! Even though the only style in my CSS specifically says max-width:480px.

Why is this happening?

I have two phones. One phone is 480px wide and the other is 1280px wide. Why does the img center on the 1280px phone when it shouldn't be?

Community
  • 1
  • 1
spike.y
  • 389
  • 5
  • 17
  • Have you tried centering a div at first? Create a div, give an id and write css rules with giving "width". If you want to center an element you have to give it a width! – Canser Yanbakan May 20 '14 at 05:14
  • You misunderstood my question. The image centers. But it centers when it shouldn't! – spike.y May 20 '14 at 05:16
  • Sorry. Well, have you ever tried on a desktop width resizing browser to 480 and bigger for getting results? When i having problem i'm testing like this and really helping... – Canser Yanbakan May 20 '14 at 05:21
  • @R.CanserYanbakan sorry, I forgot to mention, I have tried on a desktop - and it works perfectly. It stays at left and then when i resize to 480px or less it then centers. – spike.y May 20 '14 at 05:23
  • If the wider phone isn't a retina device, you could target just a retina screen. What is the 1280px device? – ralph.m May 20 '14 at 05:26
  • Are you sure your phone has 1280px width? Search google what is my screen resolution or make a script that gives the window width at document load to see what is the resolution of your phone. – Canser Yanbakan May 20 '14 at 05:26
  • @R.CanserYanbakan AAAAAHHHHHHHHHHHHHHHH! You are right! I somehow must have mis-read Samsung.com's specs for the Galaxy S 3 last night. I just checked again and it's 720wide, not 1280. 1280 is the height. :( I feel so stupid now. Thank you! :) – spike.y May 20 '14 at 05:33
  • But wait. That still doesn't answer why it is centering. If the CSS rule says, "center this when max-width is 480px", and my Samsung is 720px, why does it still center? – spike.y May 20 '14 at 05:35
  • 2
    The actual screen pixel width doesn't necessarily tell you what the phone responds to. For example, iPhones are much wider than 320px, but they still act like they are 320px wide. According to [this](http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html#Samsung), Galaxy S3s can think they are as wide as 360px. – ralph.m May 20 '14 at 05:42
  • I don't understand this anymore. If they're not going to report the correct measurements then why don't we align all our elements using complex calculations in javascript. It would be much easier. – spike.y May 20 '14 at 05:44
  • It's to do with Pixel Ratios. Wikipedia has a huge list of devices, screen resolutions and pixel ratios. http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density. For the Samsung Galaxy SIII, it does have a resolution of 1280x720, but it has a pixel ratio of 2 so you have to half that resolution for the logical resolution. In theory, given that the iPhone5 has 1136x640, if you used the media query `@media (max-width: 320px) { ... }` it should target the iPhone but not the SIII. See here too http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio – davidpauljunior May 20 '14 at 06:08
  • Ohhh, I thin I understand now. Thank you so mu @davidpauljunior, ralph and R. – spike.y May 20 '14 at 06:38

1 Answers1

2

Found this - http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Apparently, a devices resolution impacts its css width. I think css itself has an average pixel width which may or may not correspond with high-res devices out there.

So, according to this page, your 720 width still falls under CSS' understanding of 480. Hope that answers your question.

What you could try is - 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above is from https://stackoverflow.com/a/19933195/3652449

Community
  • 1
  • 1
amrita
  • 83
  • 4