jQueryレスポンシブデザイン

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。
例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。

PC時ではナビゲーションボタンはもちろん表示されている状態ですが、スマホのハンバーガーメニューではナビゲーションボタンは最初、非表示に設定されています。
スマホ時のナビゲーションボタンを「slideToggle」などで表示・非表示をコントロールしている場合、１度出して、閉まったナビゲーションボタンには「display:none」がかかった状態になって閉まっています。
この状態で、ブラウザーをPCサイズにリサイズすると、ナビゲーションボタンに「display:none」がかかったままなので、ナビゲーションボタンが非表示の状態になっています。
なので、jQueryでリサイズ時にイベントを指定する必要があります。

resizeイベントの設定

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません。

読み込み時とリサイズ時を同時に処理する場合

$(window).on('load resize', function(){
// 処理を記載
});

今回の場合

$(window).on('load resize', function(){
  if($(window).outerWidth() < 768 ){
  //スマホの時の状態
    $('#g_nav').hide();//SPの時はnavを非表示にしておく
  }else{
  //タブレット・PCの時の状態
    $('#g_nav').show();//SP以外の時はnavを表示しておく
  };
}); 

ただし、iPhoneとandroidではresizeイベントの定義が若干違く、iPhoneでは画面を縦スクロールした際にもresizeイベントが発生してしまい、おかしな動きになってしまいます。
その場合は横幅にのみに対応したresizeイベントの設定が必要になります。

iPhoneとandroidではresizeイベントの定義が若干違く、iPhoneでのresizeは横だろうが縦だろうがスクロールするとrisize判定がされてしまうので、iPhone用に横幅のみresize判定が取れる様にします。

横幅のみに対応したresizeイベントの記述

var windowWidth = $(window).width();

$(window).on('load resize', function(){
  var ww = $(window).width();
  if(windowWidth != ww) {
    if($(window).outerWidth() < 768 ){
    //スマホの時の状態
    $('#gnav').hide();//SPの時はnavを非表示にしておく
  }else{
    //タブレット・PCの時の状態
    $('#gnav').show();//SP以外の時はnavを表示しておく
  };
   windowWidth = ww;
  };
});