.matchMedia()でjsをメディアクエリを使って条件分岐する

window.matchMedia

window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。

例　1000pxまではjsを有効にさせる

$(window).on('load resize', function(){
if(window.matchMedia('(min-width:1000px)').matches) {

1000pxまで有効にさせたいjavascript

}
});

ナビゲーションの場合

Toggleを使う場合、「:not(:animated)」を設定しないとボタンをクリックした回数分スライドしてしまうので、「:not(:animated)」の設定をしましょう。

$(window).on('load resize', function(){
if(window.matchMedia('(max-width:767px)').matches){
  //スマホの時の状態
    $('#g-nav').hide();//SPの時はnavを非表示にしておく
  }else{
  //タブレット・PCの時の状態
    $('#g-nav').show();//SP以外の時はnavを表示しておく
}
});

$('#btn').on('click',function(){
$('#g-nav:not(:animated)').slideToggle();
});

ユーザーエージェントでスマホかPCか判別してやる方法もあります

ユーザーエージェント

ユーザーエージェント（UserAgent）とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。

今回のパターンはPC・タブレットであればjQueryを有効に。スマホ（iPhone・Android）であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

逆にPC・タブレットであればjQueryを無効に。スマホ（iPhone・Android）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホ（iPhone・Android）とタブレット（iPad）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。