Samsung Galaxy S21+ : viewport CSS 360 × 800 px, resolusi dan uji responsif

Mengapa menguji situs Anda di Samsung Galaxy S21+ ?

Resolusi viewport CSS Samsung Galaxy S21+

Ini adalah lebar yang dipertimbangkan oleh CSS Anda. Semua breakpoints dan media queries Anda dibandingkan dengan nilai ini, bukan dengan jumlah piksel fisik dari layar.

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 Samsung Galaxy S21+

Rasio piksel perangkat Samsung Galaxy S21+ adalah 3. Gambar Anda harus diekspor 3 kali lebih besar dari ukuran tampilannya, jika tidak, mereka akan terlihat lembut di layar ini.

Resolusi pabrikan Samsung Galaxy S21+

Ini adalah jumlah piksel sebenarnya dari layar. Nilai ini tidak terlibat dalam tata letak Anda, tetapi ini adalah yang dilaporkan oleh lembar spesifikasi dan sebagian besar alat analitik.

• 1080 piksel dalam lebar
• 2400 piksel dalam tinggi
• 393 piksel per inci (ppi)
• 6,7 inci diagonal, yaitu 17 cm
• Rasio layar 20:9

Media query dan cuplikan kode untuk Samsung Galaxy S21+

Cuplikan ini dihasilkan dari karakteristik tepat Samsung Galaxy S21+. Salin langsung ke lembar gaya atau konfigurasi Anda.

@media only screen and (min-width: 360px) and (max-width: 799px) {
  /* Samsung Galaxy S21+ */
}

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

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'samsung-galaxy-s21-plus': '360px'
    }
  }
}

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

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

Simulator Samsung Galaxy S21+ gratis

Mobile FIRST belum menyertakan Samsung Galaxy S21+, tetapi model dengan format identik sudah ada. Anda sudah dapat memvalidasi breakpoint dan densitas tampilan Anda.

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 Samsung Galaxy S21+ — Pilih Samsung Galaxy S21+ dari daftar perangkat. Viewport berubah menjadi 360 x 800 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 Samsung Galaxy S21+

4 perangkat ini berbagi viewport 360 x 800 piksel dan densitas 3x Samsung Galaxy S21+ yang sama persis. Tampilan CSS mereka sama persis: apa yang Anda validasi pada satu berlaku untuk semua yang lain.

• Samsung Galaxy S20
• Samsung Galaxy S21
• Xiaomi 12 2022
• Xiaomi Mi 11i

Perbandingan dengan model yang mirip

Format tetangga Samsung Galaxy S21+ adalah yang harus diuji segera setelahnya, karena merekalah yang mengungkapkan breakpoint yang salah tempat.

Pertanyaan umum tentang Samsung Galaxy S21+

Diperbarui pada 15 Agustus 2026