ygcyha
Last Updated: January 21, 2017
·
46.58K
· elad2412
Elad1

How to get real Mobile CSS resolutions for Responsive Design

At this time, mobile devices have improved so much that their screen resolutions are similar and sometimes even better than desktop screens resolutions.

For example Galaxy S4 of Samsung has 1080X1920 pixels - Full HD screen!

But in responsive design we check resolution and need to fit according the resolution and if you try to add media query, let's say min-width of 1000px and check it on the Samsung Galaxy S4 you will see that nothing happened.

The reason for it is that mobile high density screen have two aspect of pixels.

Real resolution<br>
The first resolution is the factory real resolution, it's mostly for videos and images. on Samsung galaxy S4 the real resolution is 1080X1920.

CSS resolution<br>
The second resolution is for the browser. and for us developers that means we need to act different and not according the real screen resolution. in Samsung Galaxy S4, CSS resolution is 360X640.

Samsung Galaxy S4 resolution:<br>
Real resolution: 1080X1920<br>
CSS resolution: 360X640<br>

How to acquire CSS resolution?
In Wikipedia you have all mobile devices resolution table (tablet and mobile devices).
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Picture

Picture

The calculation is very easy, you just need to divide the pixel screen in the CSS pixel ratio number, like this:
1080/3 = 360px (portrait - width)
1920/3 - 640px (portrait - height)

That's it! We have the CSS resolution of Samsung Galaxy S4 - 360X640 pixels.

Enjoy!

If you like this tip, I will be happy to get your LIKE. You can follow me and endorse my skills.

Say Thanks
Respond

10 Responses
Add your response

6609
43ea08b4fc547e8a5da87c207bea2123
over 1 year ago ·
6611
Elad1

@barnettjw , its nice, but the issue is for device you dont have :-)

over 1 year ago ·
6630

I also have a list of 195 devices and their viewport sizes here: https://docs.google.com/spreadsheet/ccc?key=0AoUAJWmYgaHHdHZZWWpPQkx4eHpBaUxna3dyMGkzLUE&usp=docslist_api

I've been regularly going "viewport shopping" to use devices in store and test their viewports. I'll be adding some of the ones from the Wiki entry too, now.

Note, that the Nexus 7 calculation in the Wiki page is slightly wrong. They changed the pixel ratio in Jellybean to make the portrait width 600px instead of 603px, presumably because developers might use a generic 600px media query.

over 1 year ago ·
11688
3d747e1649769352909586157968de92 normal

Thnx a lot Elad.
I've implemented http://gumbyframework.com/ in my website and now i want to calculate the pixels as you mentioned in this article.
I do understand the issue, but can you guide me where technically I have to add it in my CSS file?
Many thanks!

over 1 year ago ·
11690
Elad1

@shuraki, this protip just say how your mobile react to the responsive breakpoints.

There is nothing to add to your CSS.

Now, if you want you can add support for retina screen according to the pixel density of screens or with Responsive breakpoints that recognize your screen density.
or you can use SVG images that are appropriate for all screens.

like this Example(breakpoint for high density screen):
(-webkit-min-device-pixel-ratio : 2)

or

SVG Support to your project
https://coderwall.com/p/ohwa5g

over 1 year ago ·
11696
3d747e1649769352909586157968de92 normal

Many Thanks!!

over 1 year ago ·
12829
Me normal

Oh! Great article! Here my site http://phpmywap.net
I was confused about device width in pixel value.
I was try various pixel but it wasn't look so good in diffrent platforms. Btw thanks a lot dude! Now atleast I have an idea about how it works..

over 1 year ago ·
14673
F8365e48f5cb0d24b8bd8507966c1d9a

That was very helpful.. thanks! :)

over 1 year ago ·
17670
F72db60af53ab4f9c96a51b592a56c66

This is absolutely absurd. Why keep a list of devices that's going to change in the future? Browser makers need to give us the screen's hardware pixel density. With that we can display anything we want.

over 1 year ago ·
17950
Nxxozm7r normal

that's very clear and helpful. thanks

over 1 year ago ·