0

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!

user2821178
  • 43
  • 8

1 Answers1

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).

ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • 360px and 567px is the correct height/width from the browser's perspective. The screen's underlying high resolution isn't used in media queries. You can specifically target higher resolution devices using media queries, though. http://css-tricks.com/snippets/css/retina-display-media-query/ – ceejayoz Apr 18 '14 at 15:56