@media查询在移动设备上不起作用

Question

我一直在为网站做一些移动测试，但无法让我的媒体查询在移动浏览器中工作。 我已经在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");
    }
}

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

@media查询在移动设备上不起作用

问题描述

1 个解决方案

解决方案1
1 2015-10-08 15:15:59

@media查询在移动设备上不起作用

问题描述

1 个解决方案

解决方案1 1 2015-10-08 15:15:59

解决方案1
1 2015-10-08 15:15:59