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. Pada artikel ini, kami akan menunjukkan cara melihat versi seluler situs web di perangkat dan browser yang berbeda.
Cara Melihat Versi Seluler Situs Web di Chrome di Mac
Di Chrome, Anda dapat menguji ujung depan dan melihat apakah semuanya 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 mengubah tampilan dengan cepat 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 bagaimana situs web Anda akan terlihat 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 diaktifkan, 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 telah Anda pilih.
Setelah selesai, tutup saja jendela alat pengembang untuk menutup versi seluler dari website.
Cara Melihat Versi Seluler Situs Web di Chrome di PC Windows
Jika Anda ingin melihat versi seluler situs web di PC windows di Chrome, prosesnya cukup mirip:
Buka browser Chrome. Di Chrome, buka situs web yang ingin Anda lihat dalam versi seluler. Klik kanan halaman web dan pilih “Periksa” dari menu. Untuk membuka Alat Pengembang, klik 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).Sekarang Anda dapat mengubah dimensi layar agar sesuai dengan kebutuhan Anda.
Cara Melihat Versi Seluler Situs Web di Chrome pada Chromebook
Mengakses versi seluler situs web di Chrome menggunakan Chromebook sangat mirip dengan dua metode pertama.
Buka browser web Google Chrome.Buka laman web yang ingin Anda akses di perangkat seluler Anda.Untuk mengakses menu, klik ikon tiga titik vertikal.Seret arahkan mouse ke item Alat Lainnya dalam daftar. Pilih “Alat Pengembang.” Jendela Alat Pengembang di browser akan terbuka. Alihkan mode tampilan situs seluler dengan mengeklik ikon sakelar 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. Laman 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 peramban 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-langkah ini:
Buka versi seluler situs web yang ingin Anda lihat.Klik kanan pada halaman web dan pilih opsi “Periksa” dari menu.Pilih “Mode Desain Responsif.”Pilih ukuran layar situs web.
Bagaimana untuk Melihat Versi Seluler Situs Web di Firefox pada 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 mengeklik ikon tiga bilah horizontal.Anda akan melihat menu tarik-turun tempat Anda Anda harus memilih opsi “Pengembang Web”. Pilih “Mode Desain Responsif.” Terakhir, Anda dapat memilih model ponsel cerdas untuk melihat bagaimana situs Anda akan muncul di perangkat itu.
Cara Melihat Versi Seluler Situs Web di Safari pada a 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” lalu pada menu “Kembangkan”. Dari menu Drop-Down, pilih “Enter Responsive Design Mode.” Sekarang Anda dapat melihat versi seluler situs web.
FAQ Tambahan
Dapatkah Saya Melihat Versi Desktop Situs Web di Ponsel Saya?
Jawabannya adalah ya! 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 di tampilan desktop.
2. Ketuk ikon tiga titik untuk mengakses menu.
3. Pilih opsi “Tampilan Desktop” sekarang.
Perhatikan bahwa langkah-langkah ini dapat bervariasi tergantung pada ponsel yang Anda gunakan.
Membuat Desain Web Seluler Lebih Mudah
Alat pengembang sangat bagus untuk menganalisis dan memodifikasi versi seluler situs web di desktop tanpa beralih 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 ujung depan situs muncul 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 memperbaikinya.
Pernahkah Anda mencoba melihat versi seluler situs di desktop? Peramban mana yang Anda lebih suka gunakan untuk melakukannya? Beri tahu kami di bagian komentar di bawah.