How pixels work on CSS?

[condimen]

I don’t understand how if I inspect a responsive web on the iPhone (which has 640px), it says that the width of the body is 320px, but if I switch to the classic version it says the width is now 980px.

Can you people explain me how this works? Is some media query stuff?

Thanks a lot!

[condimen]

No, there’s got to be something else, cause if I define

@media (min-width: 320px) {
div { background: red; }
}

and

@media (min-width: 900px) {
div { background: blue; }
}

the div on the iPhone is displayed blue.

[Kitty Giraudel]

You may want to read this: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html.

[Andy Howells]

Min Width is for anything above the width you specified. MAX width is for under.

[condimen]

Ok, thanks @HugoGiraudel!
What was troubling me was this tag `` that must be defined to make the layout viewport fit the device.

[Senff]

Someone correct me if I’m wrong, but that line is basically meant to set a “baseline” for the screen, no? By default, an iPhone’s screen width is determined as 320 pixels wide (even though it uses 640 actual pixels on retina screens, but let’s forget about that for now).

With a line like this:

Then you basically say that the default viewport is set to 320 pixels wide. If you have a div that’s 160 pixels wide, it would take up half of the screen. Another div that’s 320 pixels wide, would take up the full width of the screen.

Now if you would use this line:

Then you actually tell the browser that the default viewport width is 640 pixels wide. Your 160px div would all of a sudden just take up a quarter of the screen, and your 320px div would take up half of the screen. And so yea, a div that’s 640px wide would take up the full width.

(Let’s also forget about zooming here — you basically say what the baseline is when zoom factor is 1).

It gets confusing when you add actual zoom values. Then the baseline is still the same, but you just zoom in/out in the same way as looking closer or stepping back. Sort of. And with retina screens, a default-width screen actually 640 pixels to draw a 320px screen.

All in all, the content width thing in the meta declaration really just says “whatever width this screen actually is, from now on we’re going to pretend that it’s XXX pixels wide“.

Damn, I should word this better but that’s what it basically comes down to, I believe.

[condimen]

@Senff yes, you are right, I think. By default the iPhone has 980 CSS px, but with `` you make the viewport to be exactly the same pixels as the device. This way you can use media queries to target device sizes.

[Author]

Posts