css - 媒体查询适用于 chrome 但不适用于我的移动设备

Question

我正在添加媒体查询以适应不同的移动设备，将我的代码推送到 heroku，然后它停止正常工作。它没有停止工作，直到我添加了其他媒体要求，所以我删除了其余部分并留下了我开始的内容并再次将其推送到 heroku 但它仍然无法正常工作。但是如果我在 chrome 中查看它，它可以在我的代码中工作

    /* ----------- iPhone 6+ ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) {

        .site-name {
        font-family: Lato;
        font-weight: bold;
        /*font-size: 100px;*/
        font-size: 9.5vw;
        color: white;
        margin-top: 150px;
        }

        #split{
            width: 100%;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) {

        #similar{
            width:50%;
        }
        /*  homescreen  posts*/
        #split{
            width:33%
        }
        /*  homescreen  title */
        .site-name {
        font-family: Lato;
        font-weight: bold;
        /*font-size: 100px;*/
        font-size: 9.5vw;
        color: white;
        margin-top: 150px;
        }


    }

    /* ----------- iPad mini ----------- */

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 1)  {

        #split{
            width:50%
        }

    }


    /* ----------- iPhone 6 ----------- */
    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1)  {

        #similar{
            width: 50%;
        }

        #split{
            width: 50%
        }

    }

编辑我已经想到了

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

所以缺少元标记不是问题

Answer 1

我想通了。我是查询的新手，我意识到当我删除对 iphone 6 的查询时，它起作用了，我认为顺序对 chrome 不重要，它只是寻找它，如果它在那里，它就起作用了。我读过媒体查询应该从最少开始到最多结束。希望这对媒体查询新手有所帮助。