Media queries not working on Iphone but fine on br

Question

Hi Im currently using a Boilerplate theme called Bones on a WordPress but Im having problems making the responsive menu work on my Iphone. When I manually resize the menu seems to work

the media query im using is

@media only screen and (min-width: 960px) {

the site im trying to get to work is here:link

Any help would be much appreciated as I have gone to the theme writer and he hasn't responded in days

Answer 1

I just came across an issue where, when I loaded my stylesheet with this:

<link src="mobile.css" media="only screen and (min-width: 400px)" />

and then within mobile.css, I had a couple of styles like this:

@media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

and several devices (iPhone, iPad - with a different breakpoint of course, and Galaxy Nexus) did not see the background:red; rule ("nested" media query), only those that were outside of the "inline" media query (h1). Chrome and other browsers were fine with it, however.

Answer 2

This jumped out at me as weird:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

I believe that should be

@media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

or...

@media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

You might also want to consider moving from XHTML to HTML5 for your doctype.

Answer 3

have you used the meta viewport object? Put this in the head of your document

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Answer 4

You need to mention Media like this  for iphone and smartphones

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}