Cara menampilkan tampilan Ponsel Wapblog.ID di tampilan Desktop web browser komputer.

Hai semua!

Di artikel ini saya akan jelaskan bagaimana cara menampilkan tampilan Ponsel di tampilan Desktop web browser komputer, secara ringkas, dengan gambar – agar mudah teman-teman semua pahami. Ok, langsung saja ke TKP.

Pada contoh halaman di panduan ini adalah halaman rumah dari situs syifaa jafarisna putri.

Buka Menu, pilih Developer, lalu Responsive Design Mode.

Gambar 1

Gambar 2

Maka tampilan halaman pada web browser akan berubah ke Mode Responsive seperti gambar di bawah ini.

Gambar 3

Mulai dari sekarang, anda bisa memanggil menu ini dengan jalan pintas Ctrl + Shift + M.

Gambar 4

Dari antar muka yang ada, anda bisa lihat di bagian atas kiri-atas ada tombol dan combobox. Berikut adalah penjelannya (dari kiri ke kanan):

  • [X] keluar dari mode resposive.
  • [320×480] ubah resolusi simulasi layar perangkat. Untuk ponsel, rata-rata lebarnya adalah 320-an.
  • Tiga Ikon,
    1. Rotasi resolusi: landscape-portrait
    2. Ubah ke layar sentuh (perlu reload)
    3. Screenshoot
  • Custom User Agent definisi dari User Agent String browser.

Langkah berikutnya yang harus kita lakukan adalah memasukan User Agent String ke kotak Custom User Agent. Anda bisa cari ini di Google. Seperti: http://www.user-agents.org/ dan cari String, misalnya: Blackberry.

Berikut adalah hasilnya:

BlackBerry7520/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/5.0.3.3 UP.Link/5.1.2.12 (Google WAP Proxy/1.0)

Salin dan paste string ke kotak Custom User Agent, lalu tekan Tab. Tampilan halaman akan berubah menjadi tampila sebagaimananya yang ditampilkan di Blackberry, seperti berikut.

Gambar 5

Selesai. Untuk memulihkan ke tampilan awal, anda bisa tutup Responsive Design Mode dan Reload halaman.

Perlu anda ketahui: Prosedur ini hanya berlaku pada client-side. Tidak ada cara lain agar pengunjung bisa beralih desktop-mobile selain dengan cara sejenis ini atau fitur/fungsi yang diberikan Wapblog.ID

Dikarenakan ini client-side, anda bisa lakukan design, debugging, css-ing, tempating ke situs, dalam mode: Desktop dan Mobile. Tanpa perlu Add-on browser tambahan atau beralih ke perangkat ponsel. Seperti gambar berikut:

Gambar 6

Sekian dan terimakash,
Hexat G. – Desember 2016

Comments

  • Hexat G.
    On 24 Nov 2017 20:46
    Nah, Posting ini dibuat tahun lalu dan tidak mendukung versi sekarang. Saya tidak tahu apakah cara ini masih valid.
Please login first for post a comment

Widget

Blogroll