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

我曾尝试为移动设备和平板电脑创建媒体查询，但是当我使用普通的浏览器（在台式机上并且将屏幕缩小）时，它们确实可以工作，但是当我使用实际的移动设备或平板电脑时，它们无法工作药片。我已经完成了CSS和HTML验证，所以我无法想象是那样。

我的网站已在大学服务器上启动并运行，因此您可以从那里查看媒体查询：http : //stc110.edu.csesalford.com/或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;
    }
}