CSS media queries for Galaxy S3

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)"                                                target="_blank" rel="nofollow" href="css/device-768.css"/>

Other tablet devices

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" target="_blank" rel="nofollow" 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)"    target="_blank" rel="nofollow" href="css/phones.css"/>

I also tested

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

but it didnt work…

Media Queries for Samsung Galaxy S3

I have a portfolio website that I’m trying to make responsive, and I’d like to be able to show it to people on my S3, although I’m having a bit of trouble getting it to work using media queries. I use

CSS @media queries on Samsung Galaxy S III

I’m working on a website with responsive design and mobile optimization. I’m having issues targeting the Samsung Galaxy S III default browser, as it does not scale font-sizes. The funny thing is that

css3 media queries responsive design

I am currently using css3 media queries for building a layout. I have all the media queries working, but there is a small quirk in the design. I will provide the code below: @media (min-width: 1200p

media query for galaxy s2

I have developed a responsive theme for my website, By using media queries on my css file. it works fine on ipad/iphone and small android phones. When i get to galaxy S2 it seems to ignore my media qu

CSS Media Query for Samsung Galaxy Note II

Can someone help me telling me which is the best way to target a Samsung Galaxy Note II with CSS Media Queries? Thank you in advance.

CSS3 Media queries – two layouts

I am experimenting with css3 media queries and I am trying to create two different layouts one for small screens (phones,tablets) and one for larger screens. The layout should include three main divs

CSS3 media queries not working

I am using CSS media queries on the following sites: [deleted site links] In the styles.css, both use a variation of: /*–[ Normal CSS styles ]———————————-*/ @media only screen a

CSS 3 Media Queries support for IE

I am having troubles finding a good process to go about registering CSS3 media Queries in my website I’m creating. I’ve tried the css3-mediaqueries.js but that did nothing and now I have heard that Re

Combining CSS media queries

I want to display the same set of CSS styles to people printing the page (media=print) and people browsing on a mobile phone. Is there a way I can combine CSS media queries? Something like @media on

Stacking Media Queries with CSS3

I’m trying to stack media queries in CSS, and can’t seem to get it to work correctly. What i’m trying to achieve is having a single set of css rules for any of the media queries. I know normally I cou

Answers

You can check with modernizer that your device supports Media Queries, then you can define them like this…

In your head first define:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

In the stylesheet:

<style>
/**
 * Defines media queries for web/mobile/tv
 *
 */

/**
 * For HD Devices
 * 1921px and above
 *
 */

@media screen and (max-width: 3840px) and (max-height: 3840px)
{
}
@media screen and (max-width: 2400px) and (max-height: 2400px)
{
}

/**
 * For Web Devices
 * 1024px and above
 *
 */
@media screen and (max-width: 2399px)
{
}
@media screen and (max-width: 1919px)
{
}


/**
 * For Tablet Devices
 * 601px and above
 *
 */
@media screen and (max-width: 1023px)
{
}

/**
 * For Mobile Devices
 * 320px and above
 *
 */
@media screen and (max-width: 799px)
{
}
@media screen and (max-width: 499px)
{
}
@media screen and (max-width: 419px)
{
}

/**************** Height ******************/

@media screen and (max-height: 2399px)
{
}
@media screen and (max-height: 799px)
{
}
@media screen and (max-height: 499px)
{
}
@media screen and (max-height: 419px)
{
}
</style>

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.

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{}
}

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) { 

}

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

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

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 720×1280 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 320×480, 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 720×960 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.

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  */

}

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

This is tested and worked.

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