Tampilkan halaman dalam beberapa ukuran viewport berdampingan.
Menguji desain responsif secara tradisional berarti mengubah ukuran jendela browser atau menggunakan device toolbar di DevTools untuk berpindah antar ukuran viewport satu per satu. Cara ini memang berhasil, tapi Anda hanya bisa melihat satu ukuran dalam satu waktu — sehingga mustahil membandingkan tampilan sebuah bagian di mobile versus desktop secara bersamaan. Responsive Viewer menyelesaikan ini dengan merender halaman di beberapa viewport sekaligus, ditampilkan berdampingan di layar Anda.
Pilih dari profil perangkat yang sudah tersedia (iPhone 15, iPad Pro, Pixel 8, MacBook, Desktop 1440p) atau masukkan dimensi kustom. Setiap viewport adalah instance halaman yang dirender penuh, bukan sekadar screenshot statis — scroll salah satu, dan semua viewport lain ikut scroll ke posisi yang sama. Scrolling yang tersinkronisasi ini memungkinkan Anda membandingkan area konten yang persis sama di semua ukuran perangkat sekali lihat.
Ini adalah cara tercepat untuk menemukan masalah responsif: navigasi yang wrap secara tidak tepat, gambar yang overflow dari kontainernya, teks yang menjadi sulit dibaca di layar kecil, atau spacing yang runtuh secara janggal. Setiap viewport bisa dirotasi antara portrait dan landscape secara independen, yang penting untuk tablet dan perangkat lipat (foldable) di mana kedua orientasi sama-sama umum digunakan di dunia nyata. Dimensi viewport kustom yang Anda tambahkan akan diingat untuk sesi berikutnya, sehingga breakpoint khusus sebuah proyek tidak perlu dimasukkan ulang setiap kali Anda membuka alat ini.
Lihat halaman saat ini dirender secara bersamaan dalam berbagai ukuran viewport yang ditampilkan berdampingan di layar Anda. Bandingkan tata letak seluler, tablet, dan desktop secara sekilas tanpa harus berpindah tampilan. Setiap viewport adalah render halaman yang berfungsi penuh.
Pilih dari pustaka preset perangkat populer: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900), dan Desktop Full HD (1920×1080). Preset diperbarui sesuai dengan dimensi perangkat terkini.
Masukkan lebar dan tinggi kustom untuk menguji ukuran viewport non-standar. Perlu memeriksa tampilan halaman pada lebar tepat 768px (breakpoint tablet umum)? Cukup ketik ukurannya. Beberapa viewport kustom dapat ditambahkan bersamaan dengan preset.
Gulir satu viewport dan semua viewport lainnya akan ikut bergeser ke posisi vertikal yang sama. Ini memungkinkan Anda membandingkan bagian konten yang sama persis di semua ukuran perangkat secara bersamaan — lihat bagaimana area hero, tabel harga, atau footer dirender di seluler, tablet, dan desktop.
Setiap viewport ditampilkan di dalam bingkai perangkat yang realistis — bezel ponsel, bingkai tablet, bingkai laptop. Konteks visual ini membantu pemangku kepentingan memahami viewport mana yang mewakili perangkat tertentu selama tinjauan dan presentasi.
Aktifkan atau nonaktifkan perangkat individu untuk fokus pada perbandingan ukuran tertentu. Hanya ingin membandingkan seluler dan desktop? Hapus centang pada preset tablet. Kontrol penuh atas viewport mana yang terlihat.
Setelah mengimplementasikan desain responsif, gunakan Penampil Responsif untuk memverifikasi bahwa setiap bagian terlihat benar di semua ukuran perangkat target. Temukan teks yang meluap (overflow), masalah penskalaan gambar, masalah navigasi yang menciut, dan ketidakkonsistenan spasi — semuanya dalam satu tampilan.
Tunjukkan kepada klien bagaimana tampilan situs web mereka di berbagai perangkat selama rapat tinjauan. Tampilan berdampingan ini sangat intuitif — tidak perlu menjelaskan konsep viewport. Klien dapat melihat seluler, tablet, dan desktop secara bersamaan.
Melihat tata letak rusak pada lebar tertentu? Tambahkan viewport kustom pada lebar piksel tepat di mana masalah terjadi dan bandingkan dengan viewport yang sedikit lebih lebar dan lebih sempit untuk mengidentifikasi breakpoint CSS mana yang menyebabkan masalah.
Periksa apakah judul yang panjang terbungkus (wrap) dengan benar di seluler, apakah tabel data menjadi dapat digulir di layar kecil, apakah input formulir cukup besar untuk diketuk, dan apakah CTA tetap terlihat serta dapat diakses di semua ukuran perangkat.
Gunakan tampilan multi-perangkat untuk membuat gambar pameran desain responsif yang menarik. Ambil tangkapan layar dari Penampil Responsif yang menunjukkan desain Anda di 3-4 ukuran perangkat untuk presentasi portofolio.
Buka dok mengambang DevSuite Pro dan klik ikon Penampil Responsif. Halaman akan beralih ke mode multi-viewport dengan bingkai perangkat yang ditampilkan berdampingan.
Bilah perangkat di bagian atas menunjukkan preset yang tersedia (iPhone, iPad, Pixel, MacBook, Desktop). Klik perangkat untuk menyalakan/mematikannya. Perangkat yang dipilih akan muncul sebagai viewport di bawah.
Klik tombol "Kustom" dan masukkan dimensi lebar × tinggi spesifik untuk menambahkan viewport kustom. Berguna untuk menguji nilai breakpoint yang tepat seperti 768px, 1024px, atau 1280px.
Gulir pada salah satu viewport — semua viewport lainnya akan mengikuti ke posisi yang sama. Bandingkan tampilan bagian yang sama di semua ukuran perangkat yang dipilih secara bersamaan.
Klik kembali ikon Penampil Responsif atau tombol tutup untuk keluar dari mode multi-viewport dan kembali ke tampilan halaman tunggal normal.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
