@media: if samsung galaxy s4 is 1920x1080?

Question

<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">

I'm in the middle of coding my responsive CSS and I realized that the Samsung Galaxy S4 smartphone has a screen resolution of 1080x1920—my 23" monitor is 1920x1080. I've never browsed on this phone (I have an iPhone 3 with a resolution of 320x480 which is what I thought all smartphones were around, somewhere under 800 pixels wide) so I'm a bit perplexed. How am I supposed to create a mobile website for a smartphone with a screen resolution of 1080x1920?

Beneficiary

Is your website unusable in its current form? – Bog

Very usable but I want to make all of the navigation bigger and easier to use and slim everything down to single columns if it's going to be in a handheld device. – Beneficiary

Are you using the viewport meta tag? Media queries won't have any effect without it. – Jett

I wanted to ask about the viewport meta tag also. I read a website that says while the iPhone 5's resolution width is 980px it is effectively 320px. Is that why the viewport meta tag works? – Beneficiary

What's so special about the Galaxy that it should have specific styles, while another device with similar resolution should not? If the answer is touch, then you're barking up the wrong tree with media queries. – Drawstring

Answer 1

Galaxy S4 reports 360px x 640px to the browser

Aspect ratio is 9/16

Pixel ratio is 3

@media screen and (max-device-width: 360px)

@media screen and (-webkit-min-device-pixel-ratio: 3)

@media screen and (device-aspect-ratio: 9/16)

Fineman

Answer 2

Some media queries that you might find useful in this case are:

@media screen and (orientation: portrait | landscape) { ... }

@media screen and (device-aspect-ratio: #/#) { ... }

Here's a link with more info: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Matilda

Answer 3

use @media screen and (max-device-width: your dimension here).

Quahog

Why use device width? If someone is viewing on a smaller browser window it'd make sense to make it display in the best way possible – Holothurian

Answer 4

When designing on a GS4 it renders as a regular widescreen unless you use the viewport tag in your headers. I posted the example I use to make it responsive @ Samsung Galaxy S4 Responsive Design @media

Hieratic

Answer 5

Make sure you have the viewport meta tag in your head section. Something like this:

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

This tells the user-agent to take into account the pixel density and rescale accordingly. So your 1080px width Samsung Galaxy S4 will act like a 360px width screen.

Bushcraft

Answer 6

Tested and working!

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)

Excrescent