css - デバイスの向きが変わったときに、jQuery Mobile と CSS メディア クエリを使用してイメージ src を切り替えるにはどうすればよいですか?

Question

メディア クエリと jQuery は初めてです。私がやりたいのは、ユーザーが向きを切り替えたときにモバイル サイトのヘッダー画像を入れ替えることです。私がこれまでに得たものは、奇妙なことに、ユーザーがページを更新した場合に機能しますが、最初の読み込みで間違っています。スクリプトは次のとおりです。

$( document ).ready(function() {
    if($.mobile.media("only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)")) {
        $("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/header-480x75+.png");
            } else {
                $("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/headers/header-320x75+.png");
            }
    });