Bagaimana cara mendeteksi responsive dengan jQuery ?

Ada beberapa opsi plugin yang bisa dipakai untuk memanggil fungsi javascript sesuai dengan media querynya. Salah satunya Modernizr.js, dsb.

Menggunakan Method $.width() Bukan Solusi

Biasanya kita menggunakan cara dibawah ini, untuk cek responsive di jQuery

$(window).resize(function(){
      if ($(window).width() <= 380){	
	// dan seterusnya
     }	
});

Pengalaman saya menggunakan fungsi diatas adalah terdapat perbedaan window width() dengan media queries pada browser. Lalu cara efektifnya adalah dengan mengecek properti css yang berubah di salah satu elemen.

Solusinya adalah menggunakan jQuery untuk mengecek perubahan pada properti css di element.

1. Cara Pertama

Membaca properti width di css dengan jQuery.width() :

/* Lebar normal class header */
.header{
  padding:15px;
  width:100%;
  background-color:#f3f3f3;
  display:block;
  text-align:center;
}

/* Media Query dengan max-width 380px */
@media(max-width:380px){
  .header{
    width:380px !important;
  }
}
// fungsi jQuery
var header = $(".header");
$(window).resize(function(){

 // cek kondisi bila header 
 // sudah memiliki properti width = 380px
 if(header.width() == 380){
   // responsive disini
    alert("Masuk width 380px");
  }
});

See the Pen jQuery – Media Query without plugin by Lufti Nurfahmi (@luftinur) on CodePen.

2. Cara Kedua :

Membaca property css dengan jQuery.css()

/* Position header saat normal */
.header{
   padding:15px;
   width:100%;
   background-color:#f3f3f3;
   display:block;
   position:relative;
   text-align:center;
}

/* Media Query dengan max-width 380px */
@media(max-width:380px){
  .header{
    position:fixed;
    bottom:0;
    width:100%;
  }
}

 

var header = $(".header");
  // Saat DOM Ready
  $(document).ready(function(){
  cek_property();
});

// Saat Window Resize
$(window).resize(function(){
  cek_property();
});

function cek_property(){
// cek jika kondisi class header 
// memiliki property position:absolute;
   console.log($(".header").css("position"));
   if($(".header").css("position") == "fixed"){
      // responsive disini
      $(".header").text("Posisi Class .header sudah Fixed");
   }else{
     $(".header").text("Contoh");
   }
}