什么是CSS媒体查询的jQuery等价物？

Question

我正在使用jQuery mobile创建一个侧面板.我有以下代码,它添加了滑动功能以显示侧面板:

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

我只想在用户具有480px或更高的视口时启用此滑动.我该如何添加？在CSS中,效果将通过媒体查询创建.

Answer 1

对于那些感兴趣的人,这是我最终使用的黑客:

$( document ).on( "pagecreate", "#swipe-page", function() {
    $( document ).on( "swipeleft swiperight", "#swipe-page", function( e ) {
element (panel: open).
if($('#mobile-view').is(":visible")) {
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
}
    });
});

本质上,我创建了一个受CSS媒体查询约束的元素,然后我在jQuery中测试了该元素的可见性.这确保了更好的跨浏览器兼容性,并且应该针对移动设备更新分辨率更改.