javascript - @media に依存するレスポンシブ jQuery 関数

Question

マップ領域がホバーされているときにスタイルを変更する簡単な js を作成しました。しかし、iPad では (他のタブレットと同様に、おそらく) ホバーは表示されず、マウスアップ イベントのみが表示されます。

私はすでにこの例をここに持っています。画面ではmouseeneterが必要で、タッチスクリーンではmouseupが必要であることをほとんど知っています(mouseleaveとmouseoutと同じです)。問題は、この2つのオプションに対してこれをどのように開発するか?

ここにjs：

$.noConflict();
    jQuery(function () {
        jQuery('.map_hovered').maphilight();
        jQuery('.wind').mouseenter(function () {
            jQuery('.wind_changer_hover').addClass('fancy');
        });

        jQuery('.wind').mouseleave(function () {
            jQuery('.wind_changer_hover').removeClass('fancy');
        });
    });

    $.noConflict();
    jQuery(function () {
        jQuery('.map_pressed').maphilight();
        jQuery('.wind').mouseup(function () {
            jQuery('.wind_changer_press').addClass('fancy');
        });

        jQuery('.wind').mouseout(function () {
            jQuery('.wind_changer_press').removeClass('fancy');
        });
    });