How are you specifically targeting Samsung Galaxy S3

[bChandler]

Hey guys, running into some css issues with specifically the Samsung S3.

We are in the process of converting some current sites into responsive and have got most of our break-points sorted but targeting this device is really becoming an issue.

I know the dimensions are 1280x720 and pixel density is 2, but for some reason this is conflicting with my standard 1024x758 media queries.

So what are you using to target this device?



Thanks,
Ben

[ralph.m]

Don't forget to include

<meta name="viewport" content="width=device-width">

in your HTML. Media queries work a lot better with that in place.

[bChandler]

Don't forget to include

<meta name="viewport" content="width=device-width">

in your HTML. Media queries work a lot better with that in place.

Hey Ralph,

Definitely have that bad boy in place Went through that whole process of testing different meta tags too targeting pixel densities and specific width and the rest. Using the one above now which is working fine. It's just the actual @media only screen and (min-device-width blah blah that is causing an issue..

[conradical]

Hi Chandler,
I would not use device-width. Since I cannot see your media queries, I would say that that is your issue. Responsive design is device agnostic and using device-width is almost anti-responsive - since you are designing for that device width.

Instead, use max-width and min-width if you have to. Shrink your browser window, when it breaks your site - you have your break point. Fix that and then shrink again. This method of using the max-width then will be more consistent irrespective of the device, orientation or pixel density.

Using max-device-width is just a rabbit trail of getting specific with orientation and pixel density etc..

[bChandler]

Hi Chandler,
Instead, use max-width and min-width if you have to. Shrink your browser window, when it breaks your site - you have your break point. Fix that and then shrink again. This method of using the max-width then will be more consistent irrespective of the device, orientation or pixel density.

Using max-device-width is just a rabbit trail of getting specific with orientation and pixel density etc..

Hmmm I didn't think of it that way. Ok ok that has me thinking. Thanks mate - going to give it a test

[ralph.m]

Responsive design is device agnostic and using device-width is almost anti-responsive - since you are designing for that device width.

That's not really true of the device-width meta element. Mobile devices tend to display a site at a width of around 800-1000px by default (called the "layout viewport"), meaning that a lot of the page is off screen. So media queries will be unreliable without the meta element, because you don't know how wide the device thinks the page is. Using the meta element ensures that the layout viewport matches the pixel width set by the device vendor as the width of the screen ("device independent pixels"). So by using the meta element, you'll know that on devices like the iPhone, media queries targeting a device width of 320px will kick in as expected.

[bChandler]

That's not really true of the device-width meta element. Mobile devices tend to display a site at a width of around 800-1000px by default (called the "layout viewport"), meaning that a lot of the page is off screen. So media queries will be unreliable without the meta element, because you don't know how wide the device thinks the page is. Using the meta element ensures that the layout viewport matches the pixel width set by the device vendor as the width of the screen ("device independent pixels"). So by using the meta element, you'll know that on devices like the iPhone, media queries targeting a device width of 320px will kick in as expected.

Hey Ralph,

So just thinking out-loud regarding his 'max-width' point. I'm thinking that setting a max width only in the media queries and meta tag MIGHT give me greater control.

I.e.

max-width: 320px (portrait)
max-width: 480px (landscape)
max-width: 720px (samsung galaxy portrait)
max-width: 768px (ipads etc)

and then the rest should be fine..

Well that's my sort of logic. Gotta test this out next week.

[ralph.m]

I'm thinking that setting a max width only in the media queries and meta tag MIGHT give me greater control.

That's my understanding of it, based on a recent video I watched that is worth viewing:

http://www.youtube.com/watch?v=4wscVOXjIzQ

Particularly about 50 minutes in, where he addresses this issue in detail.

[conradical]

I might have exaggerated to make a point... sure you can combine device width queries with the content=max-device-width meta tag. But we are really not worried, nor should we be, about the device width. So while it is available and possible to use, I don't think we should use it. So I think that meta viewport and width queries are the best options.

[conradical]

bChandler, here is a good read as well: http://www.quirksmode.org/blog/archi...ning_meta.html