Martin Martin - 3 months ago 8x
CSS Question

CSS: Making a div exactly 300 pixels high regardless of DPI of mobile device?

I am entering a difficult time with regards to understanding web design from the point of view of mobile devices and there DPI.

Before I just used to create 300 pixels high, a div for example and it would always be 300 pixels high and look the same on all devices, due to the fact that the monitors always practically had the same dpi. So 300 pixels = 300 pixels etc

Now mobile has arrived (arrived a while ago :-) but I haven't managed to understand it in terms of css and pixels)

So understanding I have a div of 300 pixels high, how do I ensure it looks same size (at least height wise) across different mobile devices with different DPIs ?

Is this done automatically use the meta tag for viewport ? Or this has nothing to do with it ?

There is no automatic process ? and I need to use some kind of real time resizing ?

I am hearing about CSS pixels but not sure if this has anything to do with it or if I am able to use it.

Thanks in advance


If you use a metatag like this in your html:

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

and the css for your div looks like this:

div {

Then your div should be 300px high on all devices.

Keep in mind that desktops and mobile devices have radically different DPI, so a 300px high div on a desktop will not have the same real-world dimensions as the 300px high div on an iPhone.

You may also consider getting away from using pixels, and using percents when specifying the dimensions of your elements. Percents moves from device to device much easier than pixels.

You can also use media queries to specify different pixel sizes for your elements, depending on the dimensions of the device. See: Media queries at w3schools