Cara menampilkan Website Responsive di Android menggunakan Google Chrome

Assalamualaikum Wr. Wb.

Sahabat Webhozz, dimanapun berada??? Gimana kabarnya, nih??? Semoga sehat selalu ya…Amin.

Oke langsung aja ya…

Dalam dunia web design, tentunya kita sangat dituntut untuk bisa menguasai tampilan website yang bersifat responsive.

Kenapa??? Karena dalam dunia internet sekarang kan, udah bisa diakses menggunakan Tablet, I pad, bahkan Smartphone alias telepon genggam juga.

Tentunya, karena kemampuan berbagai perangkat tersebut untuk mengakses situs web maka diperlukanlah untuk mendesain tampilan web yang bisa menyesuaikan tampilan jika diakses oleh perangkat yang berbeda. Karena tiap perangkat beda resolusinya.

Itulah web responsive. Tapi, kita tidak sedang membahas web responsive.

Kita sebagai Web Developer, tentunya saat membuat web kita pasti melakukan testing melalui aplikasi web browser.

Biasanya yang dipakai adalah Modzilla Firefox, Google Chrome, Internet Explorer, dan lain sebagainya.

Saat membuatnya bahkan testing di browser, kan kita pakai tampilan versi laptop atau pc pada umumnya.

Tapi gimana sih, caranya kalo kita pengen memastikan kalo webnya benar-benar responsive???

Nah, untuk itu salah satu aplikasi web browser yang mendukung testing web responsive adalah Google Chrome.

Jadi pada tulisan kali ini, kita akan membuat tampilan aplikasi web browser Google Chrome menjadi tampilan hp Android.

1. Anggaplah kita sedang membuat web responsive. Dan sekarang kita sedang buka hasil testingnya di browser Google Chrome.

2. Itu adalah tampilan project kita. Sekarang, kita akan membuatnya menjadi versi Hp Android. Klik kanan, pada browser lalu click Inspect Element. Cara pintasnnya, tekan F12.

3. Selanjutnya klik “Toogle Device Toolbar”. Atau “Ctrl+Shift+M”.

4. Tinggal klik pilihan menu pada list yang ditandai merah di bawah ini.

5. Berikut inilah tampilan listnya.

6. Untuk mencoba tampilan versi I Pad, maka coba pilih “I Pad Pro”.

7. Untuk mencoba tampilan versi Hp Android standar, maka coba pilih “Galaxy S5”.

8. Untuk kembali ke tampilan semula, silahkan klik close.

9. Dan kembalilah seperti semula.

Nah, mudah kan???

Demikianlah postingan kali ini. Semoga bermanfaat ya…Amin.

Wassalamualaikum Wr. Wb.