CSS media queries for Galaxy S3

Question

Anyone know how to target the Samsung Galaxy S3 with media queries?

Currently I use:

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

Other tablet devices

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

Phones (S3 didnt use this - dont know why)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

I also tested

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

but it didnt work...

Answer 1

This is tested and worked.

@media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)

Answer 2

On my Samsung S3 with Android 4.1.2, while I tried all the media query features (max-height, width, device height and width and even color:8) only this worked for me in addition to the second answer above in this page:

Samsung S3 default browser

/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;} 
}

/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  {
body { background:#000;} 
}

Here is a screenshot for the pieroxy media query diagnostic tool test. Please note that both work without orientation but don't change the propriety without load/refresh.

Hope this helps with no conflict with any other queries you might use

Answer 3

At this time, mobile devices have improved so much that their screen resolutions are similar and sometimes even better than desktop screens resolutions.

For example Galaxy S4 of Samsung has 1080X1920 pixels - Full HD screen!

But in responsive design we check resolution and need to fit according the resolution and if you try to add media query, let's say min-width of 1000px and check it on the Samsung Galaxy S4 you will see that nothing happened.

The reason for it is that mobile high density screen have two aspect of pixels.

Real resolution The first resolution is the factory real resolution, it's mostly for videos and images. on Samsung galaxy S4 the real resolution is 1080X1920.

CSS resolution The second resolution is for the browser. and for us developers that means we need to act different and not according the real screen resolution. in Samsung Galaxy S4, CSS resolution is 360X640.

Samsung Galaxy S4 resolution: Real resolution: 1080X1920 CSS resolution: 360X640

How to acquire CSS resolution? In Wikipedia you have all mobile devices resolution table (tablet and mobile devices). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){

  /*CSS  */
}

/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {

  /*CSS  */
}

/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){

  /*CSS  */

}

Answer 4

Forget all this "max-device-width" "min-height", etc, quackery!The problem is you guys are not designing for the dimensions of the device. Also, the Galaxy S3 according to Samsung has a pixel density of 2, meaning that the physical screen maps out 1 device pixel to 2 CSS pixels. If this is true then the 720x1280 resolution is only a logical resolution and not the real physical resolution of the device! This is also the case with the Apple iphone 4 which has a specified resolution of 640x960px, which is actually the logical resolution and NOT the real resolution of the actual device. The real physical resolution for the iphone is half this number after taking into account pixel density, meaning its physical dimensions are actually 320x480, which is true since I use this code all the time!

Therefore, if the S3 also has a pixel density of 2, then its real native resolution is actually 360x640px, NOT 720x960 as Samsung stated. Again, the device maps out 2 CSS pixels to 1 device pixel! Also, why on earth are people use variable media queries, quackery I tell you!

@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {

Styles go here }

@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {

Styles here } OR: You can just state the logical resolution which was provided by Samsung, DuH!, Rocket science right?

@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) {

Styles }

@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) {

Styles } Very simple! Thats all there is to it. And people wonder why they cant get media queries to work, yet they use all these variable values. Try actually targeting the resolution for the device. There's no reason on earth to ever use variable values such as "max-width", etc.

Answer 5

Samsung Galaxy S I & II: 320 x 533, in portrait mode (CSS pixel density is 1.5)

Samsung Galaxy S III: 360 x 640, in portrait mode

Answer 6

I think this would safely apply to most phones of today (HTCs, iPhones, Samsung), while avoiding the common tablet widths (iPad iPad 3/4 iOS 6 has 672px on portrait).

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>

This phone would be the odd fish:

Samsung Nexus S Android 2.3.6 Stock Browser which has width: 480px, height: 800px (max-width 800)

It is generally not recommended to target specific devices, but if you really wanted to target the odd fish you could, since it has other unique attributes. I personally prefer using max-width as I can test direct on my desktop and wide screen, and I'm not fussed for users seeing the mobile view if they really did resize their browser to less than 640 wide.

Reference: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Answer 7

I used this to target just the portrait view on the s3:

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

}

Answer 8

Like mentioned before. Use this Media Query detector on your handset and also consider using a better fluid design - CSS hacks are not good - you should not really need them in 90% of scenarios if you have a good fluid design.

Samsung Galaxy S3

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
  .your-css{}
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  .your-css{}
}

Answer 9

I have set up a page that shows you how any device will react to media queries by giving the values of the media features. Just visit the page with the device you want to test:

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

From there, you can decide which media query you want to use based on what the different devices report. Remember it is generally a bad idea to target specific devices. You should rather target display sizes and density to make your website adapt to the surface at hand.