CSSメディアクエリーのwidthとjQueryの$(window).width()は違う

CSSメディアクエリーのwidthと、

@media (min-width:768px) {
  ...
}

jQueryの$(window).width()

if ( $(window).width() >= 768 ){
  ...
}

は異なります。

同じ値にならないので、横幅が○px以上のときに、jQueryでこの処理をして、、などとすると、横幅切り替えの前後でおかしなことになってしまいます。

メディアクエリーに合わせるためには、window.matchMediaを使います。メディアクエリのための機能なので、同じ値を取得できます。

if ( window.matchMedia('(min-width: 768px)').matches ) {
  ...
}

IE9以下では使えません。IE9に対応するにはmatchmedia.jsを使います。