@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?

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. — user2441996, Jun 04 '13 at 17:08
Are you using the viewport meta tag? Media queries won't have any effect without it. — Nahydrin, Jun 04 '13 at 17:11
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? — user2441996, Jun 04 '13 at 17:21
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. — cimmanon, Jun 04 '13 at 17:39

score 20 · Answer 1 · edited Jul 25 '13 at 19:19

20

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)

edited Jul 25 '13 at 19:19

Zachary Kniebel

4,686
3
29
53

answered Jul 25 '13 at 18:59

Brian P

301
1
3

score 0 · Answer 2 · answered Jun 04 '13 at 17:13

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

score 0 · Answer 3 · answered Jun 04 '13 at 18:35

0

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

answered Jun 04 '13 at 18:35

Daniel

533
4
13

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 – mcdonaldjosh Sep 25 '15 at 20:51

score 0 · Answer 4 · edited May 23 '17 at 12:09

0

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

edited May 23 '17 at 12:09

Community

1
1

answered Jul 03 '14 at 00:27

Tyler Mammone

169
6
15

score 0 · Answer 5 · answered Dec 01 '15 at 23:30

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.

score 0 · Answer 6 · answered Feb 25 '16 at 06:43

0

Tested and working!

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

answered Feb 25 '16 at 06:43

Aruna

1
1

@media: if samsung galaxy s4 is 1920x1080?

6 Answers6

Linked