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");
            }
    });