First RWD – Media Queries not working on some phones

[gnng]

Working on my first full RWD – here it is on a test server Your text to link here…

It works on iPhone and iPad. It works my friends brand new Samsung Note. But when I ask a friend with a Galaxy 3 and another Note to check it the media queries are not kicking in and the page is a total mess!

If you can help could you paste this into your phone (www.sandiegohomegrown.com/testSDTG/) and let me know if it is working? You should see a nice, clean, mainly text-only site versus one with lots of graphics. And if there are any RWD gurus out there who can provide any tips I am very grateful. This is driving me nuts!!

Gary

[Paulie_D]

Perhaps, rather than just giving us a link you could share your media queries with us.

I also assume you are using the appropriate meta tag?

[gnng]

Yes, I have the meta tag for viewport. The CSS media queries are long and involved but you can get to them pretty easily on your browser. The issue is that the media queries only seem to work on some phones and sometimes they work on one and not the other of the same phone. This is my first RWD and not sure how to move on if the site is not rendering correctly on every popular phone.

[Paulie_D]

You making me do work when you could just post the code here. It’s not hard.

The media queries, we only need to see the headlines…not the whole code.

I don’t want to have to inspect your site for the media queries and meta tag.

[NeoWebr]

if it helps…
Looks good on my Samsung GS4, portrait and landscape.
Looks good on my Ipad (original model) in landscape mode. In portrait mode the right side of the screen is white space (about 1.5 inches worth) and the footer is very tall, but the content is all there.

[Paulie_D]

You still haven’t shown us your actual code.

[gnng]

Sorry for slow response – I can only code in the morning before work. Here are the media queries.

@media handheld and (max-width: 1235px), screen and (max-device-width: 1235px), screen and (max-width: 1235px) {

@media handheld and (max-width: 1085px), screen and (max-device-width: 1085px), screen and (max-width: 1085px) {

@media handheld and (max-width: 977px), screen and (max-device-width: 977px), screen and (max-width: 977px) {

@media handheld and (max-width: 845px), screen and (max-device-width: 845px), screen and (max-width: 845px) {

@media handheld and (max-width: 799px), screen and (max-device-width: 799px), screen and (max-width: 799px) {

@media handheld and (max-width: 744px), screen and (max-device-width: 744px), screen and (max-width: 744px) {

@media handheld and (max-width: 699px), screen and (max-device-width: 699px), screen and (max-width: 699px) {

@media handheld and (max-width: 622px), screen and (max-device-width: 622px), screen and (max-width: 622px) {

@media handheld and (max-width: 550px), screen and (max-device-width: 550px), screen and (max-width: 550px) {

@media handheld and (max-width: 468px), screen and (max-device-width: 468px), screen and (max-width: 468px) {

@media handheld and (max-width: 404px), screen and (max-device-width: 404px), screen and (max-width: 404px) {

@media handheld and (max-width: 350px), screen and (max-device-width: 350px), screen and (max-width: 350px) {

/* Galaxy Note2 – Portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {

/* Galaxy Note2 – landscape Due to the Screen Height and Width is changing during orientation changes /
/@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape)*/
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2){

[gnng]

NewWebr, thank you. I haven’t gotten to the footer yet so not worried about that. So it’s sort of good that it is working, sort of, on your phone. The design should be very simple – is that what you see (versus on the desktop where you get all the colorful boxes)?

[Paulie_D]

I really think that all those (max-device-width: ) & (-webkit-min-device-pixel-ratio: ) might be the issue.

If you have the appropriate meta tag..they aren’t required.

[gnng]

I added those last two media queries when I searched and found that others were having problems with Samsung phones. However, the issue is that it works on some phones but does not work on others – even if it is the same model and the latest OS.

Here is my meta tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

[Paulie_D]

I still think that DPR would only be useful for limited circumstances rather than on every query.

[paulob]

That looks way to complex for what is essentially a simple site.

Forget about devices and device width and make your layout work throughout the range on the desktop first (device width and layout width are not the same thing and bear no relation to each other anyway).

At the moment on the desktop anything below 1000px width in the browser is either broken or has a large vertical scrollbar.

What you are essentially interested in is layout width and this essentially covers all devices automatically. No need to target handheld in your media queries as indeed that probably confuses the situation even more. No need to cater for min and max width in the same media query but just over-ride in successive media queries.

Simplify and then simplify some more :)

Don’t target devices but create a design that goes from small to large in your desktop browsers and in most cases that will collect all devices on the way. Apply breakpoints with media queries at points where the design needs it and not where you think a device will sit. There are too many devices and too many widths to cater for individually so cater for them all with a design centric approach and collect them all on the way automatically. If you use max-width (or min-width if mobile first) media queries you cater for all devices automatically including their orientation changes.

See my answer here to a similar problem in another thread.

[Author]

Posts