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
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.
Written by Elad Shechter
Related protips
9 Responses
There's an #appforthat http://bbc-news-prototypes.heroku.com/reporter/index.html
@barnettjw , its nice, but the issue is for device you dont have :-)
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.
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!
@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
Many Thanks!!
That was very helpful.. thanks! :)
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.
that's very clear and helpful. thanks
