Membuat redirect otomatis ke halaman lain sesuai device seperti facebook dengan javascript

Hai temen-temen, di artikel ini kita mau bahas cara membuat rediect ke halaman sesuai device yang kita gunakan seperti facebook dengan bahasa pemrograman javascript. maksud nya sesuai device disini adalah apakah dia menggunakan smartphone atau menggunkan laptop atau komputer kita yang memiliki layar yg lebar kita. Jadi intinya pada tutorial ini, kita akan mengambil nilai dari lebar screen dan melakukan redirect dengan code javascript.

Pada tutorial ini saya menggunkan xampp agar bisa saya langsung saya jalankan di android dengan bantuan hostpot dari smartphone saya. Sekarang kia buat dua buah folder di htdocs yang mana isi dari dua folder tersebut masing-masing adalah index.html. saya menamakan kedua folder tersebut dengan nama facebook.com dan m.facebook.com, temen-temen bebas memberi nama falder tersebut sesuai keinginan temen-temen.

Tampilan kedua folder di folder htdocs yang ada di xampp

Setelah itu isi kan file index.html yang ada di dalam folder facebook.com dengan code berikut.




Penjelasan dari koding diatas adalah:
Pada baris ke -8:
window.screen.width berfungsi untuk mengambil nilai dari lebar screen device kita dan menympannya di variabel width.
Pada baris ke-10:
berfungsi untuk menguji apakah nilai dari variabel width lebih kecil dari 760.
Pada baris ke-11:
berfungsi untuk bila pada baris ke 10 bernilai true atau width lebih kecil dari 760 maka akan diredirect ke url http://192.168.43.13:8888/m.facebook.com, angka 192.168.43.13 itu adalah alamat ip komputer saya, karena m.facebook.com ini kan khusus untuk tampilan mobile jadi langsung saya coba di  smartphone saya dengan bantuan hostpot smartphone saya dan mengkoneksikan komputer saya ke hostpot tersebut, temen-temen bisa menggantinya sesuai dengan ip komputer temen-temen. angka 8888 itu adalah port dari localhost xampp saya.. namun jika hasil dari baris ke-10 bernilai false maka kode di baris ke-11 ini tidak akan di eksekusi.

Setelah itu isi kan file index.html yang ada di folder m.facebook.com dengan kode berikut.





Kode diatas tidak terlalu beda dengan index.html yang ada dalam folder facebook.com. Perbedaannya terletak di baris ke-10, kode itu menguji apakah nilai screen nya lebih besar dari 760. Jika iya maka akan diredirect ke http://localhost:8888/facebook.com, kenapa disitu localhost dan tidak ip komputer kita? karena facebook.com itu adalah halaman khusus untuk tampilan selebar layar laptop kita yang screennya lebih dari 760. jadi halaman ini hanya akan muncul bila kita menjalankannya langsung dari komputer kita. Dengan kode ini jika kita menuliskan url http://localhost:8888/m.facebook.com maka akan otomatis redirect ke http://localhost:8888/facebook.com.

Sampai disini dulu pembahasan kita pada artikel ini. semoga temen-temen semua paham, bila ada yang kuran jelas silahkan temen-temen tanyakan di kolom komentar.