WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

iPhoneの仕様に対応したresize設定

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



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

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

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


サンプル

RWD-ハンバーガーメニュー