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

Answer 1

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/