ubah tampilan web desktop jadi mobile secara instan

Buat beberapa orang kadang kepingin tahu bagaimana sih tampilan sebuah web ketika dibuka di mobile gadget, tapi males untuk bukanya langsung di gadgetnya. 😀

nah biasanya orang akan menggunakan semacam extension atau add-on khusus untuk mengubah tampilan web desktop menjadi mobile page.

ternyata, google chrome browser bisa mengubah mode desktop jadi mobile page tanpa bantuan extension apapun. yaitu menggunakan mode Developer Tools.

untuk mengaksesnya, klik pada icon titik tiga di pojokan kanan atas, kemudian klik more tools, lalu klik Developer Tools.
atau kalau pakai keyboard shortcut, bisa pencet tombol F12, atau Ctrl-Shift-I.

menu Developer Tools menu Developer Tools

nah, kemudian window akan terbelah dua, biasanya membuka ke bawah, tapi ada juga yang membuka ke samping.
tapi yang pasti ada icon Toggle Device Toolbar, atau shortcut keyboardnya Ctrl-Shift-M.

Device mode Device mode

klik pada icon Toggle Device Toolbar tersebut

mobile page mode mobile page mode

dan seketika tampilan layar webnya akan mengecil seperti tampilan pada mobile gadget.

nah kalau mau kembali lagi ke tampilan web desktop, tutup saja window Developer Tools ini, dan jika kembali ke mode Developer Tools, akan masih tampil sebagai mobile, sampai icon Toggle Device Toolbar diklik ulang.

yang serunya, bukan hanya sekedar mengecilkan layar biar kesannya responsive, tapi memang disimulasikan menjadi mobile page. kalau ga percaya coba aja buka web yang mempunyai fungsi berbeda ketika dibuka di desktop dan di mobile, misal instagram.
jika di desktop, web instagram belum ada tombol upload foto, tapi jika diubah jadi mobile, maka tombol camera akan muncul untuk bisa upload foto.

snydez

Leave a Reply

Your email address will not be published. Required fields are marked *