Question

我正在尝试为iPhone进行媒体查询。但是，出于某种原因，＆＃34; mobile＆＃34; div没有显示，唯一显示的是背景图像。

感谢任何帮助。提前致谢。

HTML：

<div id="wrap">
       <div id="header">
            <p id="placeholder">
                full-site<br>coming soon<span>.</span><span>.</span><span>.</span>
            </p>

            <p id="time">
                OPEN DAILY<br>8am &#8211; 8pm
            </p>

        </div>

        <div id="main">
            <img id="animate" src="assets/daily_web_logo_2.gif" alt="The Daily Roundup">        
        </div>

    </div>

     <div id="footer">

        <p id="address">hello</p>

        <p id="colophon"> 
            MADE WITH LOVE BY 
        </p>
    </div>

     <div id="mobile">

        <img id="logotype" src="assets/daily_mobile_logo.png" alt="The Daily Roundup">

        <p id="time2">
            Open Daily 8am to 8pm
        </p>

        <p id="facebook">
            Get The Daily Roundup on Facebook
        </p>

        <p id="email">
            Email us
        </p>

        <p id="address2">hello</p>

    </div>


    </body>

CSS：

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: auto;
}


@font-face{
    font-family: "AkkuratPro-Reg";
    src: url("type/AkkuratPro-Regular.otf");
}

body{
    background-color: #faf2da;
}

a{
    text-decoration: none;
    color:black;
}

#colophon{
    color:black;
}

 @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio : 2){

    html, body{
        height: auto;
        width: auto;
    }

    body{
        background: url(../assets/daily_mobile_background.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        background-size: cover;
    }

    #wrap, #footer{
        display:none;
    }

    #logotype{
        float:left;
    }

    #time2, #facebook, #email, #address2{
        font-family: "AkkuratPro-Reg", sans-serif;
        font-size: 25px;
        letter-spacing: 1px;
    }

    #time2{
        padding-top:90px;
    }

    #facebook, #email{
        padding-top:40px;
        line-height: 120%;
        text-decoration: underline;
    }

    #address2{
        padding-top:40px;
        line-height: 120%;
    }



 }

Answer 1

我根本没有看到你的#mobile div。试试这些。

/* Large desktop */
@media (min-width: 1200px) { #mobile{ display:none; }}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { #mobile{ display:none; }}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { #mobile{ display:block; }}

/* Landscape phones and down */
@media (max-width: 480px) { #mobile{ display:block; }}

顺便说一下，这是来自Twitter's Bootstrap

Answer 2

尝试将媒体查询更改为;

CameraCaptureSession.setRepeatingRequest()

像这样的东西; https://jsfiddle.net/c318fnfo/

媒体查询div工作，但其他人不工作

2 个答案: