Question

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

HTML：

max-width

CSS：

<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>

Answer 1

我认为＆＃34; -webkit-min-device-pixel-ratio＆＃34;是incorect。试试这个：

@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 个答案: