Device-Specific Media Query Works, but not while testing.

[SpringMountain]

Greetings,

I am using 320 and up‘s boilerplate for responsive CSS, and the ipad media query :

/* iPads (landscape)

*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

works on iPads as intended, but I can’t get any device testing apps or web development software to recognize it.

On the software side, I’ve tried a few applications with their own built in previews (CSS Edit/Espresso, Coda/Coda2), but no web design software to my knowledge will preview your work in device specific sizes. You can preview from any app/text editor in a browser and change the window and see your media queries do their work and everything works great, but you can’t pull up a 1024×768 window with your mouse. Safari’s Develop>User Agent>iPad doesn’t seem to work either.

I tried Adobe Device Central. I thought I had it loaded right but could not get it to 1. recognize the query in question or 2. rotate the device and have the portrait-specific query take effect.

I’ve tried a litany of websites and they all recognize my queries, just not the ipad/device specific ones, even the ones saying it will show a horizontally-oriented ipad preview.

The website works perfectly (aside from the parts I haven’t finished!) in all of these apps and all browsers. Or at least as perfect as I need it to. If I don’t use the iPad query, it works OK, and if I decide to not use it, I could manage the layout so it looks better on the ipad. Pardon my stubbornness, but I want to nail the design for all major devices out there. Pixel perfect for all iPads and Galaxy Tablets, not too crazy of a goal. I’m almost there but this back and forth of uploading/refreshing of my device is bringing my workflow to a standstill.

So what gives? I’d rather ditch device specific queries if I can’t test them without holding the device, there are just too many devices out there for this to not drive me bonkers. Is there some super website out there I don’t know about this that will deliver me accurate test results? Is there an application that will do this properly? I still have a feeling I’m the one doing something wrong here. You can see it for yourself right here.

Here’s a few of the web services I’ve tried that all work in their own way but none show what I’m seeing on the iPad :

http://resizemybrowser.com/
http://responsivepx.com/
http://mattkersley.com/responsive/
http://quirktools.com/screenfly/
http://tools.hyperspatial.com/web/devices/

On a related note, but one that does not solve all my fundamental issue, 2 days ago Panic came out with DietCoda, an app for the iPad that lets you make some quick changes to your sites via your iPad (yuck!), but more importantly, it allows you to preview your changes from the work you are doing on your laptop/desktop directly to your ipad, using it as a 2nd monitor of sorts, and (hopefully!) recognizing (and not recognizing) your 1024 horizontal oriented device specific directions. I haven’t tried it yet but I thought it was worth mentioning.

[SpringMountain]

I’m not sure if I should delete and re-write this post or just continue it here.

The query I list above does not validate, and now (after writing most of this post), I realize it remained in my css when it should have been deleted, somewhere between this css-tricks post and this page, before I found the 320and Up boilerplate. It was not from 320 and Up, not in the version I used or the current one. All apologies to Mr. Clarke & Co for that confusion.

Yes once again I answered my own question, but hopefully this will remain for someone else’s benefit.

Chris – you may want to update your article – https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ , or, is there something entirely right about this query that the W3C has yet to acknowledge?

[Author]

Posts