Cara Web Mendeteksi Mobile Browser

irnanto.com – Mendeteksi web browser untuk sebuah website sangat diperlukan karena dapat membantu dalam menentukan proses menampilkan data dan proses menentukan layout/tampilan website. Web browser ada banyak jenisnya, tetapi secara garis besar dapat dibedakan menjadi dua jenis web browser yaitu browser web desktop dan browser web mobile. Kita sudah banyak tau jenis web browser yang sering di gunakan di perangkat komputer, dan diantara web browser yang sering digunkan adalah Mozilla Firefox, Chrome, Opera, Safari, dan Internet Explorer.

Web browser mobile yang banyak digunakan diantaranya opera mini, mobile firefox, dan lain sebagainya. Sudah saya sebutkan di atas, fungsi mendeteksi web browser salah satunya yaitu dapat menentukan data mana saja yang akan di tampilkan di setiap browser yang berbeda. Bagaimana cara mendeteksi jenis web browser ? . Pertanyaan itu yang akan kita jawab dalam pembahasan saat ini.

Proses Mendeteksi Jenis Web Browser

Pertama yang harus kita ketahui ialah “Bagaimana cara mendapatkan jenis dari tiap-tiap web browser ? “. Untuk mendapatkan jenis browser kita menggunakan script PHP untuk mendapatkan user agent / jenis aplikasi pembuka website. Script PHP untuk mendapatkan data user agent yaitu menggunakan $_SERVER[‘HTTP_USER_AGENT’] . Silahkan ketik kode di bawah ini untuk melihat jenis web browser yang kita gunakan.

<?php
echo $_SERVER[‘HTTP_USER_AGENT’] ;
?>

Hasil yang akan ditampilkan di browser seperti gambar di bawah ini.

Tampilan data get user agent di browser

Tampilan data user agent akan berbeda-beda setiap browser dan sistem operasi yang digunakan. Selanjutnya, bagaimana cara membedakan web browser desktop dengan web browser mobile ?. Kita harus memiliki list user agent browser mobile terlebih dahulu untuk dapat mengklasifikasi jenis web browser. Kita langsung saja ke programnya, karena di programnya, saya sudah meletakkan beberapa identifikasi user agent web browser mobile. Ketikkan dan simpan di file ber-ekstensi .php

<?php
$useragent=$_SERVER[‘HTTP_USER_AGENT’];

if(preg_match(‘/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i’,$useragent) || preg_match(‘/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i’,substr($useragent,0,4)))
echo “<h1>Web Browser Mobile</h1>”;
?>

Penjelasan kode program mendeteksi web browser mobile :

• Mengecek data user agent dan di simpan ke dalam variabel $useragent.
• Membuat kondisi jika fungsi preg_match (Fungsi preg_match untuk mencocokkan string/regular expression dengan string subjek) mencocokkan regular expression yang isinya list user agent mobile dengan isi variabel $useragent atau fungsi preg_match mencocokkan regular expression yang isinya list user agent mobile dengan hasil potongan data dari isi variabel $useragent dimulai dari karakter pertama sebanyak empat karakter.
• Jika Kondisi benar, maka akan menampilkan tag H1 yang isinya Web Browser Mobile

Anda ingin mencobanya ? Silahkan bandingkan dengan mengakses web browser di desktop anda. Jika Anda mengakses di web browser desktop biasa maka tidak ada yang akan di tampilkan, tetapi jika anda menggunakan inspect element yang ada di browser untuk mengganti user agent atau melihat tampilan web dalam tampilan mobile atau perangkat tertentu, maka anda akan bisa melihat hasil tampilan script berupa teks H1 yaitu “Web Browser Mobile” setelah halaman di refresh, tetapi dengan ketentuan jenis perangkat yang anda gunakan di inspect element mobile merupakan identifikasi perangkat mobile.

Perhatikan gambar di bawah ini. Anda harus klik kanan pada halaman web / script pendeteksi web browser mobile, lalu pilih inspect element atau tekan shortcut pada web browser Ctrl+Shist+I (untuk browser chrome). Setelah itu akan keluar tampilan inspect element dan tekan gambar mobile (tanda merah) seperti gambar di bawah ini. Saya memilih menggunakan device Apple iPhone 4 sebagai uji coba script deteksi mobile browser, silahkan ganti sesuai dengan keinginan Anda untuk proses uji coba script dan tampilan

Mengecek script deteksi mobile browser menggunakan inspect element

Mudah kan. Silahkan di peraktekkan cara mendeteksi mobile web browser dan termia kasih telah berkunjung dan membaca artikel Cara Web Mendeteksi Mobile Browser. Semoga bermanfaat.