Search code examples
jquery-uicssmobilemedia-queriesjquery-tabs

Why are my CSS3 media queries not showing up on mobile device?


I have an iPhone 4. I know the resolution falls within the parameters of my styles. Yet I'm seeing my full-width layout on my smartphone.

Can I get a pair of fresh eyes to view source and let me know if I'm missing something obvious? It shows up in my browser but not on a device.

http://georgiaderm.com/mobile/

In my HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

In my CSS:

/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

//* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:1000px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:1000px) {
    body {padding:10px 4px; width:760px;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:768px) {
    html {background:#fff; padding:10px;}
    body {box-shadow:none; margin:0; padding:0; width:auto;}
    body > nav {display:none;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:768px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:480px) {
    .alpha, .omega {float:none;}
    .alpha > * {margin:10px auto;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:320px) {
    footer div {float:none; width:auto;}
}

edit: Simplified it.

While I'm here, anyone have a lightweight strategy for deactivating JS tabs on small devices?


Solution

  • Okay, while I didn't solve this mystery, I moved the mobile styles to the rest of the site and they suddenly worked. I guess I had something quirky going on with my CSS specificity on the mobile.css but once I moved the media queries over to my main.css, all is well.

    Thanks for the help, all.