In terms of responsive design, how do you handle high resolution phones, such as the Galaxy S4?

html css responsive-design

12,437

Solution 1

What makes you think media queries won't work?

Apparently, Galaxy S4's CSS pixel ratio is 3.0, therefore, while its physical resolution is 1080x1920, its CSS resolution is still 360x640 - similar to Galaxy S3.

There are also media queries that test for pixel density. They may help you to serve high-res pictures or vector graphics to hi-dpi devices.

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Samsung

http://bjango.com/articles/min-device-pixel-ratio/

Plus, take a look at this article:

http://www.html5rocks.com/en/mobile/high-dpi/

Awesome database of screen specifications

http://screensiz.es/phone

Solution 2

Not sure what framework you are using for your responsive design, but using Bootstrap I added this to <head> and it worked for me:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

There's some good information about this here:

http://www.html5rocks.com/en/mobile/mobifying/

Specifically, the section under the topic "Viewports" addresses your question.

12,437

Drew Gorman

Updated on September 15, 2022

Comments

Drew Gorman over 1 year

Historically, you'd use media queries based of pixel width to determine what display the end user will get. However, that doesn't/won't work when you are using a higher resolution device such as a Galaxy S4 (1080x1920) resolution.

How do you handle this?
- Prinzhorn almost 11 years
  
  AFAIK it still works, because a pixel is not a pixel quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html