Google Pixel 5 : viewport CSS 393 × 851 px, resolusi dan uji responsif

Mengapa menguji situs Anda di Google Pixel 5 ?

Resolusi viewport CSS Google Pixel 5

Resolusi ini adalah yang benar-benar dimanipulasi oleh lembar gaya Anda. Ini yang menentukan breakpoint yang diterapkan, jumlah kolom yang ditampilkan, dan ukuran gambar Anda.

Tinggi tetap indikatif: Safari, Chrome, dan browser seluler lainnya mengurangi area yang terlihat dengan bilah alamat mereka, yang melipat saat digulir.

Perhatian saat menganalisis statistik Anda: beberapa alat hanya melaporkan resolusi pabrik, tidak pernah viewport CSS yang ditampilkan di sini.

Densitas piksel Google Pixel 5

Rasio piksel perangkat Google Pixel 5 adalah 2.75. Setiap piksel CSS dirender oleh 2.75 piksel fisik, yang membuat gambar yang disediakan dalam resolusi sederhana langsung terlihat.

Resolusi pabrikan Google Pixel 5

Ini adalah jumlah piksel fisik dari layar, seperti yang diumumkan oleh produsen. Berguna untuk mempersiapkan ekspor gambar Anda, tidak berguna untuk media queries Anda.

• 1080 piksel dalam lebar
• 2340 piksel dalam tinggi
• 432 piksel per inci (ppi)
• 6 inci diagonal, yaitu 15,2 cm
• Rasio layar 19.5:9

User-Agent Google Pixel 5

String ini adalah yang dikirim oleh browser Google Pixel 5. Ini berguna untuk pengujian otomatis Anda, pembacaan log server Anda, dan deteksi sisi server.

Mozilla/5.0 (Linux; Android 16; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.6778.260 Mobile Safari/537.36

Media query dan cuplikan kode untuk Google Pixel 5

Cuplikan ini dihasilkan dari karakteristik tepat Google Pixel 5. Salin langsung ke lembar gaya atau konfigurasi Anda.

@media only screen and (min-width: 393px) and (max-width: 850px) {
  /* Google Pixel 5 */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.75),
       only screen and (min-resolution: 264dpi) {
  /* Gambar dan ikon kepadatan tinggi */
}

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'google-pixel-5': '393px'
    }
  }
}

const isDeviceWidth = window.matchMedia('(min-width: 393px)').matches;
const isHighDensity = window.devicePixelRatio >= 2.75;

<meta name="viewport" content="width=device-width, initial-scale=1">

Simulator Google Pixel 5 gratis

Mobile FIRST menyertakan Google Pixel 5: halaman Anda ditampilkan dalam viewport 393 x 851 piksel, dengan User-Agent model, peristiwa sentuhan, dan perilaku gulir dari ponsel nyata.

Di sinilah perbedaan dengan mode responsif Chrome DevTools terlihat: DevTools mengubah ukuran jendela, ekstensi mereproduksi browser perangkat dan memungkinkan ekspor tangkapan layar dan video yang dapat dibagikan.

1. 01 Pasang ekstensi — Tambahkan Mobile FIRST ke Chrome, Firefox, atau Edge. Instalasinya gratis dan tidak memerlukan akun.
2. 02 Buka halaman untuk diuji — Kunjungi URL untuk diverifikasi, termasuk alamat lokal seperti localhost:3000.
3. 03 Pilih Google Pixel 5 — Pilih Google Pixel 5 dari daftar perangkat. Viewport berubah menjadi 393 x 851 piksel dan User-Agent mobile diterapkan.
4. 04 Periksa tampilan — Gulir, ubah orientasi, uji formulir Anda, lalu ambil gambar atau video untuk dibagikan.

Model yang berbagi format Google Pixel 5

4 perangkat ini berbagi viewport 393 x 851 piksel dan densitas 2.75x Google Pixel 5 yang sama persis. Tampilan CSS mereka sama persis: apa yang Anda validasi pada satu berlaku untuk semua yang lain.

• Google Pixel 4a
• Xiaomi Redmi Note 7
• Xiaomi Redmi Note 8
• Xiaomi Redmi Note 8 Pro

Perbandingan dengan model yang mirip

Format tetangga Google Pixel 5 adalah yang harus diuji segera setelahnya, karena merekalah yang mengungkapkan breakpoint yang salah tempat.

Mockup Google Pixel 5 dalam format PNG

Untuk menyajikan maket atau tangkapan dalam bingkai realistis, mockup transparan Google Pixel 5 dapat diunduh secara gratis.

Pertanyaan umum tentang Google Pixel 5

Diperbarui pada 15 Agustus 2026