@media 查询不适用于移动设备答案

【问题标题】：@media queries not working on mobile devices@media 查询不适用于移动设备
【发布时间】：2015-10-07 23:45:03
【问题描述】：

我一直在为一个网站进行一些移动测试，但无法让我的媒体查询在移动浏览器中工作。我已经在 iPad Air 2 和 iPhone 5c 上的 Chrome 和 Safari 中进行了测试，但均无济于事。将max-device-width 等属性更改为max-width，这些更改在浏览器中有效，但在移动设备上仍然无效。以下是相关部分的部分代码。

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");
    }
}

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

我认为“-webkit-min-device-pixel-ratio”是不正确的。试试这个：

@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");
    }
}

【讨论】：