ajaxコールでメディアクエリに反応します

Question

ブラウザでサイズ変更イベントを聞き取り、しきい値を超えたとき< 48 rem、サーバーに「xs」=>超小型リクエストヘッダーを送信してください。逆に、> 48 REMのために、 "SM" を送信します=>小さな

は、これまでのところ、この思い付いた -

if (matchMedia) { 
    var mq = window.matchMedia("(max-width: 48rem)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 
    if (mq.matches) { 
    // window width is less than 48rem 
    (function(send) { 
     XMLHttpRequest.prototype.send = function(data) { 
      // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent 
      this.setRequestHeader('x-size-token', ' '); 
      this.setRequestHeader('x-size-token', "xs"); 
      send.call(this, data); 
     }; 
    })(XMLHttpRequest.prototype.send); 
    } else { 
    // window width is at least 48rem 
    (function(send) { 
     XMLHttpRequest.prototype.send = function(data) { 
      // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent 
      this.setRequestHeader('x-size-token', ' '); 
      this.setRequestHeader('x-size-token', "sm"); 
      send.call(this, data); 
     }; 
    })(XMLHttpRequest.prototype.send); 
    } 

} 

これは、このようにヘッダを要求するために追加されます。

sm 
xs,sm 
sm,xs,sm 

だから、基本的に古いものを書いているのではなく、代わりにそれが付いているようです。

リクエストヘッダーには、xs/smのどちらかが1つしかないというのはその方法ですか？

EDIT：イベントのサイズを変更するごとにリロードするいくつかの提案を1として

、それが確実に動作しますが、私は失われることが多くの状態があるとして、各resizeイベントにリロードすることができません。私のために働いているようだ何

$(window).on('resize',function(){location.reload();}); 

Answer 1

は以下の通りです：

function WidthChange(mq) { 
     if (mq.matches) { 
     // window width is less than 48rem 
     $.ajaxSetup({ 
      headers : { 
       "x-size-token" : "xs" 
      } 
     }); 
     } else { 
     // window width is at least 48rem 
     $.ajaxSetup({ 
      headers : { 
       "x-size-token" : "sm" 
      } 
     }); 
     } 
    } 

ので、代わりのAJAX呼び出しと設定要求をインターセプトページをリロードリサイズに

xs 
sm 
xs