Beberapa waktu yang lalu ada pertanyaan melalui YM kami, bagaimana caranya agar website berpindah tampilan secara otomatis dari versi standar (PC) ke versi mobile ketika user mengakses dari handphone atau sebaliknya. Dia melihat website detik.com yang selalu mengarah ke m.detik.com ketika diakses melalui HP atau tablet. Bagaimana pemrogramannya?
Ada beberapa cara yang bisa dilakukan untuk berpindah, atau bahasa pemrogramannya Redirecting dari satu halaman ke halaman lain dengan trigger tertentu.
Dalam artikel ini, kami berikan 2 alternatif, yaitu mendeteksi Jenis browser yang dipakai dan ukuran layar user.
Deteksi Browser
Seperti kita ketahui, sebuah browser versi mobile dan versi PC memiliki beberapa perbedaan, ada browser versi mobile untuk browser tertentu. Dengan kita memiliki list browser mana yang versi mobile dan tidak, maka kita bisa mengarahkan ke halaman tertentu jika browser yang kita deteksi tersebut memenuhi kriteria dalam list tersebut.
Dengan javascript dapat dideteksi jenis, nama dan versi browser, bahkan platform operating system yang dipakai juga dapat dilihat.
Seperti kita ketahui, sebuah browser versi mobile dan versi PC memiliki beberapa perbedaan, ada browser versi mobile untuk browser tertentu. Dengan kita memiliki list browser mana yang versi mobile dan tidak, maka kita bisa mengarahkan ke halaman tertentu jika browser yang kita deteksi tersebut memenuhi kriteria dalam list tersebut.
Dengan javascript dapat dideteksi jenis, nama dan versi browser, bahkan platform operating system yang dipakai juga dapat dilihat.
Berikut code javascriptnya:
var appname = window.navigator.appName;
atau
var browser = navigator.appName;
var version = navigator.appVersion;
var version = navigator.appVersion;
Untuk membaca lebih lanjut, silahkan di sini:
http://web-design-lessons.com/articles/article/1/JavaScript%20Browser%20Detection
http://web-design-lessons.com/articles/article/1/JavaScript%20Browser%20Detection
Deteksi ukuran layar
Cara yang paling mudah adalah dengan mendeteksi ukuran layar (window), ukuran layar browser standar (PC) dan versi mobile jelas sangat berbeda. Ukuran layar standar memiliki resolusi tinggi, untuk layar sekarang minimal 1024×728 pixel (ukuran ini juga sudah sangat jarang). Tetapi versi mobile, saat ini masih jauh dibawahnya.
Dengan mengetahui ukuran layarnya, jika kurang dari ukuran yang kita tentukan, maka kita bisa mengarahkan halaman ke versi mobile. Dengan mengetahui ukuran layar, kita juga bisa mengatur lay out website agar fit atau menyesuaikan dengan ukuran layar apapun yang dipakai (responsive).
Dengan javascript, kita bisa melihat ukuran layar dengan cara:
Cara yang paling mudah adalah dengan mendeteksi ukuran layar (window), ukuran layar browser standar (PC) dan versi mobile jelas sangat berbeda. Ukuran layar standar memiliki resolusi tinggi, untuk layar sekarang minimal 1024×728 pixel (ukuran ini juga sudah sangat jarang). Tetapi versi mobile, saat ini masih jauh dibawahnya.
Dengan mengetahui ukuran layarnya, jika kurang dari ukuran yang kita tentukan, maka kita bisa mengarahkan halaman ke versi mobile. Dengan mengetahui ukuran layar, kita juga bisa mengatur lay out website agar fit atau menyesuaikan dengan ukuran layar apapun yang dipakai (responsive).
Dengan javascript, kita bisa melihat ukuran layar dengan cara:
var width = screen.width; (lebar layar browser)
var height = screen.height; (tinggi layar browser)
var height = screen.height; (tinggi layar browser)
Jadi, sangat mudah untuk menentukan bagaimana memperlakukan dan mengarahkan browser milik pengunjung website kita agar berpindah dari versi standar (desktop PC) ke versi mobile dan sebaliknya.
