Question

我将展示屏幕分辨率和响应式网页，但在我设法在谷歌开发工具，iPhone 7屏幕模拟器上显示一个示例，但试图在实际手机上浏览页面并且它＆＃39;空白。

我已添加meta name:viewpoint并确保所有内容都指向正确的文件。从各方面来看，它应该像在模拟器上显示一样工作。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title> iPhone 6 %amp; 7 will show</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <style>

/* shows the same display on both landscape and portrait */

        /* iPhone 7 in portrait & landscape */
    /* @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) {
        body{
            background-image: url('imgs/P-375px.jpg') 
        }

    } */

/* comment out to only show in portrait */

    /* iPhone 7 in landscape */
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
        body{
            background-image: url('imgs/L-667px.jpg') 
        }
        .box{
            background:pink;
            width:20%;
            height: 20%;
            padding:5%;
            border: red 2px solid;
            color:green;
        }
    }

/* comment out to only show in landscape */

    /* iPhone 7 in portrait */
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) {
        body{
            background-image: url('imgs/P-375px.jpg') 
        }
        .box{
            background:yellow;
            width:20%;
            height: 20%;
            padding:5%;
            border: blue 2px solid;
            color:orange;
        }
    }
        </style>
    </head>
    <body>
        <div class="box"></div>

    </body>
    </html>

Answer 1

只需将min-device-width更改为min-width，将max-device-width更改为max-width - 您在媒体查询中使用的像素值实际上是＆＃34; css像素＆＃34;，不是＆＃34;设备像素＆＃34; （由于视网膜显示，这是两倍）

在谷歌开发工具上显示媒体，但在iPhone上没有

1 个答案: