I'm...">
Geek Answers Handbook

@media: if the samsung s4 galaxy is 1920x1080?

<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-inch monitor is 1920x1080. I never looked at this phone (I have an iPhone 3 with a resolution of 320x480, and this is what I thought all the smartphones were around, somewhere under 800 pixels wide), so I'm a little puzzled. How should I create a mobile website for a smartphone with a screen resolution of 1080x1920?

+7
source share
6 answers

Galaxy S4 reports 360px x 640px to browser

9/16 aspect ratio

The 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)
+20
source

Some multimedia queries that may be useful in this case are as follows:

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

Here is a link with additional information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

0
source

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

0
source

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

0
source

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

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

This tells the user agent to consider pixel density and scale accordingly. Thus, your width of 1080 pixels Samsung Galaxy S4 will act as a screen width of 360 pixels.

0
source

Tested and working!

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

More articles:


All Articles