Lewati ke konten

Pratinjau responsif

Lihat pratinjau situs web apa pun dalam ukuran ponsel, tablet, dan komputer meja, serta bandingkan secara berdampingan tanpa membuka Alat Pengembang peramban.

Beberapa situs memblokir penyematan dengan tajuk X-Frame-Options; lihat Tanya Jawab di bawah.

Ukuran perangkat
Ukuran kustom
px
px

Pratinjau situs web

375 x 667

Bandingkan ponsel, tablet, dan komputer sekilas

Halaman yang sama dirender dalam tiga lebar secara berdampingan, sehingga Anda dapat menemukan kerusakan tata letak tanpa perlu mengganti ukuran satu per satu.

Ponsel390 x 844

Tablet768 x 1024

Komputer meja1440 x 900

Cara kerja

Alat pratinjau responsif memuat situs web di dalam iframe dengan lebar dan tinggi perangkat yang dipilih, lalu menskalakannya agar pas di layar. Dengan begitu, Anda dapat memeriksa desain pada ukuran ponsel, tablet, dan komputer tanpa mengubah ukuran jendela peramban atau membuka DevTools.

  1. Masukkan URL

    Ketik alamat dan klik Pratinjau, atau tekan Enter.

  2. Pilih ukuran

    Pilih preset perangkat, atau atur lebar dan tinggi kustom hingga 3.840 px.

  3. Bandingkan

    Putar, aktifkan atau nonaktifkan bingkai perangkat, atau gulir ke bawah untuk melihat ponsel, tablet, dan desktop secara bersamaan.

Apa yang diperiksa dan apa yang tidak

Pratinjau merender halaman pada ukuran piksel CSS logis dari perangkat yang dipilih, sehingga akurat untuk memeriksa tata letak, titik henti, dan gambar responsif yang menggunakan kueri media CSS atau atribut sizes.

  • Rasio piksel perangkat: iframe tidak mensimulasikan kepadatan piksel layar Retina yang lebih tinggi, sehingga gambar yang dimuat hanya melalui kueri min-resolution mungkin tidak sepenuhnya sama dengan tampilan di perangkat asli.
  • Sentuh dan arah kursor: ini adalah tab peramban yang dikendalikan tetikus, sehingga interaksi khusus arah kursor berjalan seperti pada desktop, bukan seperti pada layar sentuh.
  • Penyematan diblokir: situs yang mengirim header X-Frame-Options atau frame-ancestors menolak dimuat di iframe mana pun, termasuk iframe ini. Itu adalah pengaturan keamanan situs tersebut dan tidak dapat diatasi oleh alat pratinjau.

Untuk pengujian presisi piksel

Gunakan emulasi perangkat bawaan peramban Anda (bilah alat perangkat DevTools) atau perangkat fisik. Alat ini paling cepat untuk pemeriksaan tata letak singkat di berbagai lebar sekaligus, bukan pengganti pengujian pada perangkat keras nyata sebelum dirilis.

Pertanyaan yang sering diajukan

Bagaimana cara melihat pratinjau situs web pada berbagai ukuran layar tanpa DevTools peramban?

Masukkan URL situs, lalu klik Pratinjau. Pilih prasetel perangkat seperti iPhone SE (375x667), iPad (768x1024), Desktop (1440x900), dan lainnya, atau masukkan lebar dan tinggi kustom. Situs dimuat dalam iframe berskala yang sesuai dengan area pandang tersebut. Klik Putar untuk berganti antara orientasi potret dan lanskap.

Ukuran perangkat apa saja yang tersedia dalam alat pratinjau responsif?

Prasetel mencakup iPhone SE (375x667), iPhone 14 (390x844), iPad (768x1024), iPad Pro (1024x1366), MacBook (1280x800), dan Desktop (1440x900). Anda juga dapat memasukkan lebar dan tinggi kustom hingga 3.840 px, lalu klik Terapkan ukuran kustom untuk mempratinjau breakpoint nonstandar.

Dapatkah saya membandingkan ponsel, tablet, dan komputer sekaligus?

Ya. Di bawah pratinjau utama, bagian Bandingkan menampilkan URL yang sama pada lebar ponsel, tablet, dan desktop secara berdampingan, sehingga Anda dapat menemukan kerusakan tata letak tanpa perlu mengganti ukuran satu per satu.

Mengapa situs web tidak dimuat dalam pratinjau responsif?

Banyak situs memblokir penyematan iframe dengan tajuk HTTP X-Frame-Options atau Content-Security-Policy: frame-ancestors. Ketika sebuah situs mengirimkan tajuk tersebut, peramban menolak menampilkannya di dalam iframe apa pun. Ini merupakan langkah keamanan sisi server dan tidak dapat dilewati oleh alat pratinjau. Situs yang terdampak umumnya meliputi mesin pencari, jejaring sosial, dan situs perbankan.

Bagaimana cara menguji tata letak situs dalam orientasi lanskap?

Setelah memilih prasetelan perangkat, misalnya iPhone 14 pada 390x844, klik tombol Putar. Tindakan ini menukar lebar dan tinggi menjadi 844x390 untuk mensimulasikan mode lanskap. Ukuran yang ditampilkan di atas pratinjau akan diperbarui sesuai. Klik Putar sekali lagi untuk kembali ke potret.

Apa keterbatasan pratinjau responsif berbasis iframe?

Pratinjau menampilkan situs pada dimensi piksel logis dari area pandang yang dipilih, tetapi tidak meniru rasio piksel perangkat sebenarnya. Gambar beresolusi tinggi atau kueri media yang menargetkan min-resolution mungkin tidak berperilaku sama seperti pada perangkat sungguhan. Untuk pengujian presisi piksel, gunakan emulasi perangkat di peramban atau perangkat fisik.