Tiga cara merekam website seperti tampilannya di ponsel: rekam ponselnya langsung, emulasikan ponsel di Chrome DevTools, atau render halaman pada lebar ponsel dari URL-nya.
Aviral LakhanpaulDiperbarui 2 menit baca
Muat halaman pada lebar ponsel agar situs menyajikan tata letak selulernya yang asli, lalu rekam itu. Kamu bisa merekam layar ponsel sungguhan, mengemulasikan ponsel dengan bilah alat perangkat di Chrome DevTools lalu merekam jendelanya, atau memberikan URL ke alat yang membaca halaman pada lebar ponsel dan langsung mengekspor video 9:16 atau 4:5. Jangan pernah memperkecil rekaman desktop: hasilnya halaman desktop yang kecil, bukan situs versi ponsel.
Situs responsif menentukan tata letaknya dari lebar jendela tempat ia dibuka. Pada lebar desktop, kamu mendapat tata letak desktop, apa pun bentuk potongan videonya nanti. Untuk mendapatkan tombol menu, kolom yang bertumpuk, dan area ketuk yang lebih besar dari situs versi ponsel, halamannya sendiri harus dimuat pada lebar ponsel. Semua cara di bawah ini adalah jalan berbeda untuk melakukannya.
| Metode | Cocok untuk | Yang perlu diwaspadai |
|---|---|---|
| Rekam layar ponsel itu sendiri | Interaksi sentuh sungguhan, perangkat sungguhan | Bilah status dan notifikasi ikut terekam, guliran hasil sentilan jari |
| Bilah alat perangkat di Chrome DevTools | Halaman di localhost atau di balik login | Merekam jendela yang kecil, menggulir manual atau dengan skrip |
| Render URL pada lebar ponsel | Halaman publik, guliran yang bersih dan rata | Tidak bisa menjangkau halaman privat |
iPhone dan Android sama-sama punya perekam layar bawaan di pengaturan cepat. Perekam ini merekam perangkat sungguhan, dan itu jujur, sekaligus merekam gulirannya, dan di situlah masalahnya: ibu jari menyentil lalu halaman meluncur, dan setiap sentilan terlihat berbeda.
Buka DevTools, nyalakan bilah alat perangkat (⇧ ⌘ M di Mac, Ctrl Shift M di Windows), lalu pilih ponsel dari daftar. Halaman dimuat ulang pada lebar itu dengan user agent bergaya layar sentuh, dan menyajikan tata letak selulernya. Rekam viewport itu saja dengan perekam layar dan biarkan skrip yang menggulir; panduan gulir otomatis menyediakannya.
Atur zoom di bilah alat perangkat ke 100% sebelum merekam, kalau tidak perekam menangkap salinan yang diperkecil dan teksnya jadi lembek.
Tempel alamatnya di beranda lalu pilih Ponsel, atau Tablet, di bagian atas pengaturan video. Halaman dimuat pada lebar itu di server kami, sehingga situs menampilkan tata letak yang memang disajikannya di sana, dan bentuk yang cocok untuk ponsel jadi tersedia: 9:16, 4:5, dan 1:1.
Video versi ponsel hasil render atau rekaman hanya berisi layarnya. Untuk menampilkannya di dalam iPhone atau Pixel, masukkan video ke perangkat di aplikasi mockup atau template editor video. Ekspor dalam 9:16 agar video memenuhi layar perangkat tanpa bilah hitam.
Tempel tautan dan lihat pratinjau guliran secara gratis. 51 kredit gratis saat mendaftar, tanpa kartu, dan tanpa watermark di apa pun yang kamu ekspor.
Pakai bilah alat perangkat di Chrome DevTools untuk memuat halaman pada lebar ponsel, lalu rekam viewport itu. Atau tempel URL-nya ke alat yang membaca halaman pada lebar ponsel dan langsung mengekspor videonya.
Karena halamannya dimuat pada lebar desktop lalu dipotong atau diperkecil. Tata letak dipilih berdasarkan lebar jendela, jadi halaman harus dimuat pada lebar ponsel untuk menampilkan situs versi ponsel.
9:16 untuk memenuhi layar ponsel, seperti di Reels, TikTok, dan story. 4:5 untuk postingan feed. 1:1 jika mungkin ditampilkan di keduanya.
Otomatiskan perekaman situs dengan gerak yang bisa disesuaikan, kendali yang cerdas, dan pilihan ekspor yang dirancang untuk kreator masa kini.
