User Agent Spoofer

6 Replies

Web

Jadi ceritanya saya baru saja selesai membuat mobile version dari web  yang saya buat. Nah, waktu mau mulai mengedit versi mobile-nya, saya bingung gimana cara tau bagian apa yang mesti dibenerin. Biasanya saya pakai inspect element di google chrome atau firefox untuk ngeliat bagian mana yang tampilannya masih kurang bagus. Nah, kalau dari hp saya belum tau gimana caranya inspect element itu.

Tapi untungnya google chrome punya add-ons yang memudahkan buat para web developer untuk melihat versi mobile ataupun tampilan di browser lain dari web yang dikerjakannya, namanya User Agent Spoofer. Bermanfaat banget nih. Tinggal pasang add-ons-nya terus bisa langsung pilih kita mau menampilkan tampilan dari sudut pandang apa. Mulai dari defaultnya, yaitu google chrome sendiri, mozilla firefox, opera, safari, sampai tampilan di windows phone.

Begini tampilannya, letaknya di kanan atas pada google chrome.

User Agent Spoofer

User Agent Spoofer

Gak cuman google chrome aja kok yang punya. Buat yang defaultnya make firefox, firefox juga punya add-ons UA Switcher yang fungsinya sama dengan UA Spoofer-nya google chrome.

Nah, buat yang mengerjakan web dengan responsive design (tampilannya otomatis menyesuaikan device yang dipakai), bisa banget nih ngutak-ngatik codingan css di tampilan yang berbeda-beda. Untuk yang belum responsive design, cara untuk membuat responsive design itu tidak begitu sulit kok.

  1. Cukup bedakan stylingnya atau file .css-nya. Misalnya kalau di web file .css itu judulnya style.css, untuk yang tampilan di mobile device judulnya mobile.css. Sebenerny file .css-nya juga bisa digabung, tapi akan lebih mudah dan tidak membingungkan sebaiknya dipisah.
  2. Di mobile.css, tulis[code language=”css”]@media only screen and (max-width: 480px){styling di sini}[/code]untuk mengkhususkan style pada mobile.
  3. Selanjutnya import mobile.css di css utama. Misalnya, file .css utama yang dipakai adalah style.css, maka tulis[code language=”css”]@import url(‘css/mobile.css’);[/code]

Cukup simple kan? 😉

Contoh perbandingan tampilan di web, iPad, dan android:

6 comments

  1. Shinta

    saya pake developer tools bawaan chrome sama firefox juga ada, jadi bisa langsung inspect element nya ^^. Udah gitu bisa di setting sendiri mau ukuran berapa x berapa. karena sekarang gadget ukurannya macem-macem dan kadang ngga bisa sama antara 1 sama yang lain

    1. istianasutanti

      iya mak, saya juga pake dev toolsnya chrome sama firefox. UA spoofer biar gak ribet megang banyak gadget, liatnya di chrome aja atau firefox aja, hehe.
      kadang emang gak bisa sama sih emang, makanya saya suka kalo assign lebar pake % biar sesuai sama lebar gadget. salah satu caranya sih gitu ya 😀

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: