Detect Mobile Browser

Cara mengatahui apakah user menggunakan mobile device atau bukan, bisa jadi untuk menampilkan halaman atau melakukan styling yang sesuai khusus untuk mobile.

Cara sederhana untuk melakukannya adalah dengan mendeteksi user agent browsernya.

Function Expression

Yang akan kita gunakan adalah regular expression test untuk mendeteksi apakah browser adalah mobile device, seperti:

Untuk memastikan melalui console, kita dapat menambahkan kode berikut:

console.log(isMobile());

Use Case

Contoh penggunaan nya adalah sebagai berikut:

if (isMobile()) {
  // menambah class ".mobile" pada html
  document.documentElement.classList.add('mobile');
}

atau dengan jQuery:

if (isMobile()) {
  // menambah class ".mobile" pada html
  $('html').addClass('mobile');
}

Setelah menambahkan atribut class pada html, maka kita dapat melakukan styling dengan css, sebagai berikut:

.mobile body{
  /* setting overflow hanya berlaku pada body tag apabila diakses dengan mobile device */
  overflow-x: hidden;
}

CodePen

Credit

Image by Alejandro Escamillafrom Unsplash