css - 第二个媒体查询不起作用

Question

手机的媒体查询不工作。我看过其他帖子，但没有找到解决方案。

如上所述，问题很简单。笔记本电脑的媒体查询有效，但手机的媒体查询似乎无法识别。 网站: www,beesandthebirds.com

/*Media queries*/

/*Phone*/
@media only screen and (max-width: 415px) {
    #logo{
        background-size: 76%;
        height:60%;
    }
    #text{
        top:49%;
    }
    #text >h1{
        font-size: 4.5em;
    }
    #space{
        bottom: -47px;
    }
    .x8{
        top:625px;
    }
    .x9{
        top:725px;
    }
    .x10{
        top:825px;
    }
}

/*Laptop*/

@media only screen and (min-width:1024px) and (max-width: 1367px) {
    #logo{
        background-size: 21%;
        height:60%;
    }

    #text{
        top:49%;

    }
    #text >h1{
        font-size: 1.5em;
    }
    #space{
        bottom: -47px;
    }


}

Answer 1

我最近刚刚添加了“meta name="viewport"content="width=device-width,initial-scale=1.0""，现在可以使用了。