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.
The first resolution is the factory real resolution, it's mostly for videos and images. on Samsung galaxy S4 the real resolution is 1080X1920.
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).
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.
If you like this tip, I will be happy to get your LIKE. You can follow me and endorse my skills.