html - @media が正しく機能しない

Question

次のようなcssファイルがあります。

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-device-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

モバイル ブラウザから html を実行すると、フル スクリーンで表示されません。何を変更する必要がありますか? Safari と Chrome を試してみましたが、どちらもモバイル デバイスに変更を適用していないようです。