Der von Mobile Preview verwendete Viewport des iPhone 17 beträgt 402 × 874 CSS-Pixel im Hochformat und 874 × 402 im Querformat. Die Kamera: Dynamic Island.
Die Größe auf einen Blick
| Hochformat | 402 × 874 px |
|---|---|
| Querformat | 874 × 402 px |
| Seitenverhältnis (Höhe / Breite) | 2.17 |
| Kamera | Dynamic Island |
| Tailwind (Hochformat) | unter sm (unter 640 px) |
| Tailwind (Querformat) | md (ab 768 px) |
Das sind CSS-Pixel (Layout-Pixel), die Größen des Mobile-Preview-Rahmens. Auf echten Geräten können sie durch die Browseroberfläche, die Anzeige-Zoom-Einstellung oder die Systemversion leicht abweichen.
In CSS testen
Bevorzugen Sie Breakpoints, die sich am Inhalt orientieren, statt gerätespezifischer Regeln. Wenn Sie genau diese Größe nachstellen müssen, etwa zum Debuggen eines Layouts, trifft diese Media Query sie im Hochformat:
@media (width: 402px) and (height: 874px) {
/* iPhone 17, Hochformat */
}Die Aussparung (Dynamic Island) ragt bei Vollbild-Layouts in den oberen Bildschirmrand. Fügen Sie viewport-fit=cover zum Viewport-Meta-Tag hinzu und geben Sie festen Kopfzeilen mit env(safe-area-inset-top) ein Padding, damit nichts verdeckt wird.
Geräte mit dem gleichen Viewport wie das iPhone 17
Diese Rahmen verwenden denselben Viewport von 402 × 874, eine Prüfung deckt also alle ab:
iPhone 17 in VS Code als Vorschau anzeigen
Der Rahmen iPhone 17 ist in der kostenlosen Version von Mobile Preview enthalten. Installieren Sie die Erweiterung, starten Sie Ihren Dev-Server, führen Sie „Mobile Preview: Show“ aus und wählen Sie iPhone 17 im Gerätemenü: Ihre Seite erscheint im Rahmen neben Ihrem Code und lädt beim Speichern neu.
Mobile Preview installieren · Schritt-für-Schritt-Anleitung (auf Englisch)
Ähnliche Breiten
- iPhone 11 (414 × 896)
- iPhone 13 Pro (390 × 844)
- iPhone 14 Pro (393 × 852)
- iPhone 15 (393 × 852)
- iPhone 16 (393 × 852)
- iPhone Air (420 × 912)
Häufige Fragen
- Wie groß ist der Viewport des iPhone 17 in CSS-Pixeln?
- 402 × 874 im Hochformat (Breite × Höhe) und 874 × 402 im Querformat, wie von Mobile Preview verwendet. Der physische Bildschirm hat mehr Pixel; Ihr Layout sieht CSS-Pixel.
- In welchen Tailwind-Breakpoint fällt das iPhone 17?
- Mit den Standard-Breakpoints von Tailwind liegt das iPhone 17 im Hochformat bei unter sm (unter 640 px) und im Querformat bei md (ab 768 px).
- Kann ich meine Website auf dem iPhone 17 in VS Code als Vorschau anzeigen?
- Ja. Der Rahmen iPhone 17 ist in der kostenlosen Version von Mobile Preview enthalten.
Alle Gerätegrößen · EN · FR · ES · PT