Debuging Media Queries

HTML & CSS
1

What tools do you use to debug media queries?

I am having issues with the portrait orientation of my site, it is supposed to remove the floats, and set the width of all content to 100% instead of 30% columns, but I am getting no float and 55% width

http://cpradio.no-ip.info:12710/svn.cpradio.com/cpradio.com/ is the test site

2

It all looks fine to me, although the testimonials box only stretched to a width of 50% on a narrow screen because of this:


div.pageContainer div.pageContent div.pageContentText div.lastcolumn {
float: none;
margin-left: 25%;
margin-right: 25%;
min-width: 300px;
[COLOR="#FF0000"]width: 50%;[/COLOR]
}

Is that what you mean, or am I missing the point? What device is it not working on?

3

Sorry, no on my Android ICS tablet the About Me and My Mission are only 55%, the Testimonials is correct (I want that to be 50% centered)

I want the About Me and My Mission to take up 100%

4

Hm, it’s fine on iPhone and iPad. I can’t test on Android.

5

Okay, I was wondering if maybe it was a bug on Android (unfortunately, it is a bug across all of the browsers available for Android). I’ll see if I can’t get a screenshot of it to post at some point later today.

6

Okay, here is the screenshot.

7

Have you tried setting the meta tag to stop scaling.

e.g.


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

I just downloaded this and it seems to work - hell of a download though.

8

But does the emulator let you access things like “Developer Tools” in Chrome in the Android browser? I can run it fine using my phone/tablet, but I can’t see how the browser is making its decisions like I can locally in chrome.

I’ll try the viewport meta tag (didn’t think of that) when I get home.

9

No, its only useful for people like me who don’t own a phone :slight_smile: You still have to debug in the same way by making changes and uploading etc.

10

Thanks Paul. Hadn’t come across that. It’s downloading now. :slight_smile:

11

You nailed it. It was the viewport. Adding the meta tag solved my issue.

12

I haven’t had a chance to play with this on my own website yet, but it seems Chrome v20 has made debugging media queries easier.

You can now set your User Agent to Android 2.3 or Android 4.0 and it will adjust the device metrics (the viewport) for you as well. :slight_smile:

13

Oooh, very nice. Chrome just gets better and better. :slight_smile:

14

I did an initial test and the 4.0 User Agent doesn’t quite mimick my Android 4.0 Tablet, but it is close. For example, I still wouldn’t have guessed I needed the viewport meta tag using Chrome.

15

You’ll still need the full fledged emulators to this properly and in the one I mentioned above it shows as the real thing and you can see that your problem is evident on most sites unless you add the meta tag - and then it is fixed.

16

Yes, that is evident, but it does help that Chrome can present many of the settings for you within itself now too. I just hate installing such a large SDK for only gaining an emulator (which is why I have an Android phone and tablet for testing - cost me $150 to get both and was worth every penny to me)

17

I just hate installing such a large SDK

Yes, it’s a pain - perhaps I should invest in some real phones for testing.:slight_smile: Although I can’t really find a use for a mobile phone. The last call I made on one was about 13 years ago when we had them installed in our fleet of vehicles - but the phones were too big to carry in those days.

18

Oh, I don’t have them activated, just bought them from ebay/craigslist, etc and use the local wifi at home for testing only. I do have a cell phone (because I don’t have a landline and do a lot of traveling, but it isn’t anything fancy).

19

Ah ok, that sounds like a good solution for testing properly.:slight_smile: