Online Responsive Web Testers

Question

I am trying to build a site with iphone / android / ipad compatibility but do not possess these devices. I tried using the Responsinator, but noticed that it was not even picking up my iphone media queries, such as:

/* iphone */
@media only screen and (max-device-width: 480px) {
    #wrapper { background-color: red; }
}

The background for #wrapper was not showing up red on the Responsinator's iphone viewer, but on an actual iphone it is. Are there any good free sites or apps that will pick up css media queries so that I can develop for these devices without having to own all of them?

Thank you

Just resize your browser window? The only media query that will be hard to test is one that targets retina displays, or where the pixel ratio is more than 1 (`min-device-pixel-ratio`). Oh, and you may want to use `max-width` instead of `max-device-width` that's probably why they're not picked up. — powerbuoy, Mar 18 '12 at 22:01
[Ripple](http://ripple.tinyhippos.com/) looks interesting. I haven't used it too much yet, but it gives some emulation seems decent compared to the Android emulator (which is terrible). — Jared Farrish, Mar 18 '12 at 22:07

score 3 · Accepted Answer · edited Dec 18 '12 at 15:45

I think the reason they're not picked up in "normal" browsers is that you're using max-device-width. If you use max-width instead they'll work "everywhere" (not IE).

I'd also suggest coding mobile first. Instead of starting with the largest resolution and working backwards, start with the smallest and improve the layout as the resolution grows.

Personally I use this code:

/* Default */

/* Little larger screen */
@media only screen and (min-width: 480px) {

}

/* Pads and larger phones */
@media only screen and (min-width: 600px) {

}

/* Larger pads */
@media only screen and (min-width: 768px) {

}

/* Horizontal pads and laptops */
@media only screen and (min-width: 992px) {

}

/* Really large screens */
@media only screen and (min-width: 1382px) {

}

/* 2X size (iPhone 4 etc) */
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

}

From: http://stuffandnonsense.co.uk/projects/320andup/

Thanks yes max-device-width was the culprit – Nick B Mar 18 '12 at 23:46 — Nick B, Mar 18 '12 at 23:46

Online Responsive Web Testers

1 Answers1