Bad S4 mini web resolution recognition

Question

I'm having some troubles with my Samsung S4 mini. Why if I visit this page

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

i retrieve width 360px and height 567px when in the Samsung site the resolution for S4 mini is 540X960?

For this reason using css to retreive the resolution I retrieve the bad resolution, I'm using the code as follow in order to adapt webpage elements:

...
@media screen and (min-width:151px) and (max-width:300px)...
@media screen and (min-width:301px) and (max-width:600px)...
...

How can I retrieve the correct resolution?

Thanks a lot!

Answer 1

The device has a 1.5 pixel ratio because it's a high resolution screen (some devices like iPhones are 2.0 pixel ratio, meaning each pixel in CSS is actually a 2x2 region on the screen). As such, a pixel on the screen is not the same as a pixel in the web browser (or websites would all look about a third too small on it).