CODEWITHSUNDEEP
cssmobileresponsive-designmedia
Julia Spangler
Julia Spangler

Reputation: 25

Media query not working on iPhone or Android, not fully working on desktop either

I am trying to design a website that will responsively display either the desktop version or the mobile version depending on the user's device. I prefer to do this with responsive CSS as opposed to a mobile redirect.

The website in question is http://www.raceweekend.com. When the browser window is resized to a mobile width, the following is supposed to happen:

  1. the horizontal menu should become vertical in red rectangle blocks
  2. the rotating image should disappear
  3. the logo should become centered at the top
  4. the date (next to the logo) should disappear

The CSS behaves exactly how I want it to in both IE9 and Firefox. When I resize the window to be narrow enough, all of the above items happen.

On mobile, it just shows the regular browser version; none of the above items happen. I tested on an iPhone 4 and a Samsung Galaxy Nexus.

Here is my media query code:

@media handheld, screen and (max-width: 480px) {
#nav-bar {
    display:none;
}

#header {
    height:auto !important;
    width:100% !important;
}

#nav {
    height:auto !important;
}

.main-nav li {
    float:none !important;
    clear:both;
    background-color:#cf171f;
    margin-bottom:1px !important;
    padding:0 !important;
}

.main-nav li a{
    display:block;
    padding:10px 18px;
}

.main-nav li a:hover{
    background-color:#be161d;
    color:#ffffff !important;
}

#date {
    display:none;
}

#race-logo {
    width: 100% !important;
}

.center {
    margin: 0px auto;
    display: block;
}

#content, #content-sliders {
    margin-left:5% !important;
    width: 90% !important;
    padding-top:20px !important;
}

#footer {
    font-size:14px !important;
    line-height:1.5em;
}

}

Upvotes: 1

Views: 1818

Answers (2)

daGUY
daGUY

Reputation: 28743

You need to add the viewport meta tag to your HTML:

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

By default, an iPhone will in fact render sites as if its viewport were 980px wide, then scale them down to fit its actual width. This is because an iPhone's true viewport width is 480px (a literal 480px on an iPhone 3GS or earlier, or a "logical" 480px on a double-resolution iPhone 4 retina display), and so if it didn't do this, you'd only see a 480px-wide slice of every site you visited.

Confused yet? Go to, say, NYTimes.com on a desktop browser and resize the window to 480px wide. That's how the site would render on an iPhone if it didn't report its viewport width as 980px by default.

Anyway, that's why your media query doesn't work. So, adding the above meta tag will tell the iPhone to report its width as its actual width (480px), and that will then match the condition in your media query.

Upvotes: 0

Christian
Christian

Reputation: 19740

Try using meta tags to force the mobile browser to report it's actual width:

<meta name="viewport" content="width=device-width" />

You could also disable zooming if you've got an appropriate responsive design:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Upvotes: 6

Related Questions