Langsung ke konten utama
loading

Cara Mendeteksi Website / Blog Dibuka Dengan Smartphone (Detecting Mobile Devices)

Bingung mau diberi judul apa, :-/ maksudnya adalah cara mendeteksi apakah website / blog dibuka oleh pengunjung dengan smartphone atau bahasa linggisnya mungkin sering dikatakan Detecting Mobile Devices. Hal ini sangat diperlukan karena seringkali kita perlu memberikan aturan-aturan script yang sesuai dengan device yang membukanya. Bahkan deteksi perangkat mobile ini lebih sering diperlukan dibandingkan sekedar mendeteksi Operating System perangkatnya. Detecting Mobile Devices

Detecting Mobile Devices

Yang saya maksud mendeteksi ini bukan untuk style / css yang menggunakan media query itu, namun menggunakan javascript. Dengan deteksi ini kita bisa menentukan apa yang harus dilakukan jika website dibuka dengan smartphone dan bagaimana kalau dibuka via desktop PC / Laptop .

Baiklah langsung saja, berikut ini fungsi paling pendek namun sangat efektif yang bisa digunakan mendeteksi perangkat mobile:

function isMobile() {
   return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i ).test( navigator.userAgent );
}

Penggunaannya jika perintah hanya ditujukan untuk perangkat mobile bisa seperti berikut ini:

if ( isMobile() ) {
   // disini perintah jika dibuka dengan smartphone
}

Atau jika perintahnya selalu dilakukan namun ada perbedaan jika dibuka via mobile dengan via desktop PC / Laptop bentuknya seperti berikut ini:

if ( isMobile() ) {
 // disini perintah jika dibuka dengan smartphone
} else {
   // disini perintah jika bukan smartphone
}

Contoh Penerapan

Perhatikan kotak dibawah ini, jika Anda membuka halaman ini dengan perangkat smartphone, maka akan tertulis Smartphone, jika dibuka dengan komputer akan tertulis Desktop PC / Laptop. Dibawahnya adalah rincian User Agent Browser yang Anda gunakan.


User Agent:


Sebagai referensi kode untuk contoh penerapan diatas dalam bentuk beda lagi adalah seperti dibawah ini:

HTML:

<div class="text-center">
   <div class="fs-silver-block">
      <div class="alert alert-info">
         <strong id="fs-detect-mobile"></strong>
      </div>
   </div>
</div>
<p class="text-info">User Agent: <code id="fs-detect-UA"></code></p>

Javascript:

$( '#fs-detect-mobile' ).html( function() {
   return isMobile() ? 'Smartphone' : 'Desktop PC / Laptop';
});
$( '#fs-detect-UA' ).html( navigator.userAgent );

Ini adalah catatan saya, jika berguna bagi Anda silahkan digunakan.

Komentar 0  Recent Comments