Menu
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?
988
This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.).
Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices.
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
51
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
