Apple iPhone 8 Plus : viewport CSS 414 × 736 px, resolusi dan uji responsif

Mengapa menguji situs Anda di Apple iPhone 8 Plus ?

Resolusi viewport CSS Apple iPhone 8 Plus

Ini adalah resolusi yang paling menarik bagi desainer dan pengembang, karena menentukan breakpoints dan definisi media queries. Dalam praktiknya, ini adalah satu-satunya yang dibahas dalam lembar gaya.

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 Apple iPhone 8 Plus

Rasio piksel perangkat Apple iPhone 8 Plus adalah 3. Dengan kata lain, sebuah kotak 1 piksel dalam CSS menempati 3 piksel pada layar. Gambar yang diekspor dalam ukuran sebenarnya akan terlihat buram.

Resolusi pabrikan Apple iPhone 8 Plus

Resolusi ini adalah milik perangkat keras. Ini menjelaskan ketajaman tampilan, tetapi ini bukan yang harus ditargetkan dalam media query.

• 1080 piksel dalam lebar
• 1920 piksel dalam tinggi
• 401 piksel per inci (ppi)
• 5,5 inci diagonal, yaitu 14 cm
• Rasio layar 16:9

Le panneau est en 1080x1920 mais iOS rend en 1242x2208 avant sous-échantillonnage matériel : l'écart avec viewport x densité est normal.

Media query dan cuplikan kode untuk Apple iPhone 8 Plus

Cuplikan ini dihasilkan dari karakteristik tepat Apple iPhone 8 Plus. Salin langsung ke lembar gaya atau konfigurasi Anda.

@media only screen and (min-width: 414px) and (max-width: 735px) {
  /* Apple iPhone 8 Plus */
}

@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: {
      'apple-iphone-8-plus': '414px'
    }
  }
}

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

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

Simulator Apple iPhone 8 Plus gratis

Mobile FIRST belum menyertakan Apple iPhone 8 Plus, 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 Apple iPhone 8 Plus — Pilih Apple iPhone 8 Plus dari daftar perangkat. Viewport berubah menjadi 414 x 736 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 Apple iPhone 8 Plus

2 perangkat ini berbagi viewport 414 x 736 piksel dan densitas 3x Apple iPhone 8 Plus yang sama persis. Tampilan CSS mereka sama persis: apa yang Anda validasi pada satu berlaku untuk semua yang lain.

• Apple iPhone 6s Plus
• Apple iPhone 7 Plus

Perbandingan dengan model yang mirip

Format tetangga Apple iPhone 8 Plus adalah yang harus diuji segera setelahnya, karena merekalah yang mengungkapkan breakpoint yang salah tempat.

Pertanyaan umum tentang Apple iPhone 8 Plus

Diperbarui pada 15 Agustus 2026