为什么我的媒体查询不起作用？

Question

我曾尝试为手机和平板电脑创建媒体查询，当我在普通浏览器上（在我的台式电脑上，我把屏幕调小了）时，它们可以工作，但当我在在实际的手机或平板电脑上。我已经完成了 CSS 和 HTML 验证，所以我无法想象会是那样。

我的网站已上线并且运行在我的大学服务器上，因此您可以从那里查看我的媒体查询：http://stc110.edu.csesalford.com/ or http://stc110.edu.csesalford.com/general.css

这些是我的媒体查询：

/*Styles for screen 600px and lower*/
@media handheld, screen and (max-width: 600px) {
    #navigation { 
        height: auto;
    }
    #navigation ul {
        width: 100%;
        display: block;
        height: auto;
    }
    #navigation li {
        width: 50%;
        float: left;
        position: relative;
    }
    #navigation li a {
        border-bottom: 1px solid #ff9999;
        border-right: 1px solid #ff9999;
    }
    #navigation a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
    header {
        padding-top: 30px; 
    }
}

/*Styles for screen 480px and lower*/
@media handheld, screen and (max-width : 480px) {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media handheld {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

Answer 1

请将下面的代码放在标题部分

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

@media handheld 已弃用。

改为使用：

@media only screen and (max-width: 600px) {

和

@media only screen and (max-width: 480px) {

为什么我的媒体查询不起作用？

Why aren't my media queries working?

css

media-queries