Blogku "suka-suka" Aku !!!

Mengalihkan tampilan blog dekstop ke mobile browser (android, BB, ios, window mobile, dll)

Jika kita membuka alamat atau domain website dengan menggunakan Device Mobile seperti Android, blackberry, dsb. Maka secara otomatis website tersebut mengarahkan kita ke mode View Mobile / HP, dengan tampilan nya yang sederhana dan sangat ringan.
Seperti contoh domain Facebook. Jika kita mengakses Alamat www.facebook.com dengan menggunakan HP, maka kita akan di alihkan ke alamat m.facebook.com.

tampilan dekstop jika dibuka di mobile device akan terlihat kurang cantik, bahkan ribet karena terlalu lebar sehingga harus dislide kanan kiri jadi tidak praktis. Oleh karena itu kita membutuhkan script untuk mendeteksi browser yang digunakan dan menampilkan halaman sesuai dengan browser yang digunakan,

Baiklah, disini kita bisa menggunakan JavaScript dan PHP.

<script type=”text/javascript”>
function browserDetection(){
var ua = navigator.userAgent.toLowerCase();
var host = window.location.host;
var protocol = window.location.protocol;
var referer = document.referrer;
var regex1= /android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;
var regex2= /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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i;
if (document.referrer == ”||(referer.indexOf(“//m.”)==-1 && referer.indexOf(“m.”)!=0)){
if(ua.match(regex1)||ua.substr(0,4).match(regex2)){
if(host.indexOf(‘www.’)== 0) {
host=host.substr(4);
}
window.location=protocol+’//m.’+host;
return;
}
}

}
</script>

Terapkan script ini pada bagian index website kita, seperti index.php, atau index.html, di antara <head>Disini!</head>, dan pada bagian <body> gunakan script seperti ini: <body onLoad=”browserDetection();”> Untuk memanggil Fungsi dari browserDetection(); Yang telah kita buat di atas.

Jangan lupa untuk mengganti URL pengalihan nya yang di beri hurup tebal warna merah pada script di atas : window.location=protocol+’//m.’+host; 

Jika alamat pengalihan nya menggunakan sub domain http://m.domain.com, maka biarkan script di atas apa adanya, tapi jika anda menggunakan domain folder, seperti : http://domain.com/mobile/  maka harus di ganti seperti ini : window.location=protocol+’//www.’+host+’/mobile’; 

<?php
$useragent = $_SERVER[‘HTTP_USER_AGENT’];
if(preg_match(‘/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i’,substr($useragent,0,4)))
{
header(‘Location: http://m.domain.com‘);
}
else
{
header(‘Location: http://domain.com/web‘);
}
?>

Untuk penerapan script di atas anda harus menerapkan nya di bagian index.php, pada domain utama, dan silahkan ganti alamat pengalihan nya, yang di beri hurup tebal warna merah pada script php di atas.

Jika anda menggunakan script ini di bagian index.php dan tidak ingin mengalihkanya apabila pengunjung web anda menggunakan dekstop komputer, maka hilangkan bagian :

else
{
header(‘Location: http://domain.com/web‘);
}

untuk pemakaian pada halaman web kita bisa membuat file tersendiri misal detekbrowser.php. setelah itu kita include kan pada bagian head file index.html kita:

<head> <?php include ‘detekbrowser.php’?> </head>

secara otomatis akan mengarahkan ke file yang kita setting untuk tampilan mobile. 🙂

Jangan lupa like dan share ^_^

oleh: mas iyo (Januari 3, 2018 @14:16) kategori: Komputer, Programming

5 komentar :

  • imam berkata:
    05/01/2018 pukul 11:49

    nice info mas…

    Balas
  • reza berkata:
    07/01/2018 pukul 13:40

    artikelnya bermanfaat, bagi blogger yg ingin blog nya responsif dan mudah digunakan bagi pengunjung seluler

    Balas
  • Alex Giriawan berkata:
    12/01/2018 pukul 21:57

    Thanks banget udah membagian scriptnya om, dari kemarin ane mondar mandir nyarinya ?

    Balas

    • Tinggalkan Balasan ke imam Batalkan balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *