CODEWITHSUNDEEP
htmlcssmobileresponsive-design
ThorntonStuart
ThorntonStuart

Reputation: 139

@media queries not working on mobile devices

I have been doing some mobile testing for a site and can't get my media queries to work in mobile browsers. I have tested in both Chrome and Safari on iPad Air 2 and iPhone 5c to no avail. Changed properties like max-device-width to max-width and the changes worked in the browser but still not on mobile. Here is some of the code shortened to relevant parts.

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Stuart Thornton - Web Developer - Manchester, UK</title>

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <!--CSS Stylesheets-->
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">

</head>

<section id="home">

<div id="main-headers">
    <h1>Stuart Thornton</h1>
    <h2>Web Developer / Designer</h2>

    <a href="#about-me" class="ghost-btn">Let's Get Started</a>
</div>

CSS:

/* Section 7 - Media Queries */

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

@media only screen 
    and (max-device-width: 767px) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

Upvotes: 1

Views: 213

Answers (1)

P. Frank
P. Frank

Reputation: 5745

i think the "-webkit-min-device-pixel-ratio" is incorect. Try this:

@media screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

@media screen 
    and (max-device-width: 767px) {

    #home {
        background-image: url("../img/manc-skyline-med.png");
    }
}

Upvotes: 1

Related Questions