Jika Anda seorang pengembang web atau memiliki bisnis online, Anda mungkin ingin tahu bagaimana tampilan situs seluler di desktop. Tampilan dan fungsionalitas situs seluler Anda dapat menjadi sangat penting karena lebih dari separuh lalu lintas Internet berasal dari ponsel. Pelanggan lebih cenderung tinggal di situs lebih lama atau membeli sesuatu jika secara visual menarik. Tampilan desktop juga dapat membantu Anda mengedit dan memperbaiki kemungkinan masalah lebih cepat.
Untungnya, ini adalah proses yang relatif mudah. Dalam artikel ini, kami akan menunjukkan cara melihat versi seluler situs web di berbagai perangkat dan browser.
Cara Melihat Versi Seluler Situs Web di Chrome di Mac
Di Chrome, Anda dapat menguji ujung depan dan melihat apakah semua komponen situs web beroperasi dengan benar dengan menggunakan alat pengembang bawaan yang disebut DevTools. Karena menyediakan pilihan perangkat yang telah ditentukan sebelumnya, DevTools adalah cara terbaik bagi pengembang untuk dengan cepat mengubah tampilan dari desktop ke seluler dan sebaliknya tanpa ekstensi pengembang apa pun.
Anda juga dapat mengubah ukuran layar agar sesuai dengan kebutuhan Anda dan menyesuaikan lebar dan tinggi layar untuk melihat tampilan situs web Anda pada ukuran layar yang berbeda. Untuk melakukannya di Mac, ikuti langkah-langkah berikut:
- Luncurkan browser Google Chrome dan buka situs yang ingin Anda lihat.
- Tekan F12 di keyboard Anda untuk mengakses DevTools.
- Saat mode dihidupkan, klik ikon Toggle Device Emulation.
- Anda dapat memilih dari daftar perangkat iOS dan Android untuk menirunya.
- Ini akan menampilkan situs web dalam bentuk seluler yang Anda pilih.
Setelah selesai, tutup saja jendela alat pengembang untuk menutup versi seluler situs web.
Cara Melihat Versi Seluler Situs Web di Chrome pada PC Windows
Jika Anda ingin melihat versi seluler situs web di PC windows di Chrome, prosesnya cukup mirip:
- Buka peramban Chrome.
- Di Chrome, buka situs web yang ingin Anda lihat dalam versi seluler.
- Klik kanan halaman web dan pilih Inspect dari menu.
- Untuk membuka Alat Pengembang, klik pada tab Alat Lainnya dan pilih Alat Pengembang atau tekan F12 untuk membuka DevTools.
- Jendela Alat Pengembang akan terbuka.
- Klik Ikon Pengalih Perangkat untuk beralih ke Mode Tampilan Situs Seluler.
- Pilih perangkat seluler yang ingin Anda tiru (opsional).
- Anda sekarang dapat memodifikasi dimensi layar agar sesuai dengan kebutuhan Anda.
Cara Melihat Versi Seluler Situs Web di Chrome di Chromebook
Mengakses versi seluler situs web di Chrome menggunakan Chromebook sangat mirip dengan dua metode pertama.
- Buka peramban web Google Chrome.
- Buka halaman web yang ingin Anda akses di perangkat seluler Anda.
- Untuk mengakses menu, klik ikon tiga titik vertikal.
- Seret mouse Anda ke item Alat Lainnya dalam daftar.
- Pilih Alat Pengembang.
- Jendela Alat Pengembang di browser akan terbuka.
- Alihkan mode tampilan situs seluler dengan mengeklik ikon Pengalih perangkat.
Ini akan memunculkan antarmuka pengguna untuk situs seluler. Anda juga dapat memilih pengalaman perangkat yang diinginkan dengan memilih merek dan model dari kotak tarik-turun. Halaman web akan disegarkan sebagai situs desktop setiap kali Anda menutup konsol alat pengembang.
Cara Melihat Versi Seluler Situs Web di Firefox di Mac
Anda dapat menggunakan browser web lain seperti Firefox untuk melihat situs seluler di desktop Mac. Mengubah ukuran jendela browser adalah salah satu metode yang digunakan sebagian besar pengembang web untuk mengevaluasi situs web desain responsif. Namun, sebagian besar waktu, alternatif ini tampaknya tidak dapat diterima.
Di situlah kemampuan pengembangan web browser Firefox berguna. Anda dapat menelusuri halaman web Anda dalam berbagai resolusi jika Anda tahu cara mengakses situs web versi seluler di Firefox. Ikuti langkah ini:
- Buka versi seluler situs web yang ingin Anda lihat.
- Klik kanan pada halaman web dan pilih opsi Inspect dari menu.
- Pilih Mode Desain Responsif.
- Pilih ukuran layar situs web.
Cara Melihat Versi Seluler Situs Web di Firefox di PC Windows
PC Windows juga memiliki opsi untuk melihat versi seluler situs web menggunakan Firefox. Berikut cara melakukannya:
- Mulai Firefox di PC Anda.
- Buka situs web yang ingin Anda lihat sebagai versi seluler.
- Buka Pengaturan dengan mengklik ikon tiga bilah horizontal.
- Anda akan melihat menu tarik-turun di mana Anda harus memilih opsi Pengembang Web.
- Pilih Mode Desain Responsif.
- Terakhir, Anda dapat memilih model ponsel cerdas untuk melihat tampilan situs Anda di perangkat itu.
Cara Melihat Versi Seluler Situs Web di Safari di Mac
Kami telah membahas cara melihat situs web seluler di desktop menggunakan Chrome dan Firefox. Tapi bagaimana dengan browser default yang disertakan dengan perangkat Mac, Safari? Untungnya, Anda juga dapat melihat versi seluler situs web di Safari.
- Luncurkan browser Safari.
- Buka situs web yang ingin Anda lihat sebagai versi seluler.
- Klik Opsi dan kemudian pada menu Kembangkan.
- Dari menu Drop-Down, pilih Enter Responsive Design Mode.
- Anda sekarang dapat melihat versi seluler situs web.
FAQ tambahan
Bisakah Saya Melihat Versi Desktop Situs Web di Ponsel Saya?
Jawabannya iya! Anda dapat beralih dari versi seluler ke versi desktop untuk memeriksanya tanpa menggunakan komputer. Langkah-langkah untuk menggeser versi mobile ke versi desktop di Chrome adalah sebagai berikut:
1. Buka situs web yang ingin Anda lihat dalam tampilan desktop.
2. Ketuk ikon tiga titik untuk mengakses menu.
3. Pilih opsi Tampilan Desktop sekarang.
Ingatlah bahwa langkah-langkah ini dapat bervariasi tergantung pada ponsel yang Anda gunakan.
tombol start tidak bisa membuka windows 10
Membuat Desain Web Seluler Lebih Mudah
Alat pengembang sangat bagus untuk menganalisis dan memodifikasi versi seluler situs web di desktop tanpa berpindah perangkat. Anda dapat mengubah ukuran layar untuk mengamati bagaimana komponen berfungsi di berbagai perangkat. Anda dapat menyesuaikan komponen yang berbeda dan membuat situs web untuk beberapa ukuran layar menggunakan mode responsif.
Saat mendesain situs web, perancang harus selalu mengingat bagaimana tampilan depan situs di ponsel, tablet, dan desktop. Menggunakan metode yang dijelaskan dalam artikel juga dapat membantu pengembang melakukannya dan juga mengidentifikasi komponen situs web mana yang membuat masalah untuk diperbaiki.
Pernahkah Anda mencoba melihat versi seluler situs di desktop Anda? Peramban mana yang Anda lebih suka gunakan untuk melakukannya? Beri tahu kami di bagian komentar di bawah.
