Tampilkan halaman dalam beberapa ukuran viewport berdampingan.
Tampilkan halaman dalam beberapa ukuran viewport berdampingan. Alat ini memungkinkan pengembang untuk memvalidasi tata letak responsif secara instan tanpa harus mengubah ukuran jendela browser secara manual.
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.
