Der von Mobile Preview verwendete Viewport des Xiaomi 13 beträgt 393 × 851 CSS-Pixel im Hochformat und 851 × 393 im Querformat. Die Kamera: Punch-Hole-Kamera.
Die Größe auf einen Blick
| Hochformat | 393 × 851 px |
|---|---|
| Querformat | 851 × 393 px |
| Seitenverhältnis (Höhe / Breite) | 2.17 |
| Kamera | Punch-Hole-Kamera |
| 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: 393px) and (height: 851px) {
/* Xiaomi 13, Hochformat */
}Android-Browser halten die Statusleiste über der Seite, daher verdeckt die Punch-Hole-Kamera in einem normalen Tab selten Inhalte. Testen Sie fixierte Kopfzeilen, Vollbild-Overlays und installierte Web-Apps, bei denen die Seite unter die Statusleiste reichen kann.
Xiaomi 13 in VS Code als Vorschau anzeigen
Der Rahmen Xiaomi 13 gehört zu Mobile Preview Pro (6,99 €, Einmalzahlung, kein Abo). Die kostenlose Version enthält das iPhone 16, iPhone 17 und iPhone 17 Pro Max. Installieren Sie die Erweiterung, starten Sie Ihren Dev-Server, führen Sie „Mobile Preview: Show“ aus und wählen Sie Xiaomi 13 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 12 Mini (375 × 812)
- iPhone 13 Pro (390 × 844)
- iPhone 14 Pro (393 × 852)
- iPhone 15 (393 × 852)
- iPhone 16 (393 × 852)
Häufige Fragen
- Wie groß ist der Viewport des Xiaomi 13 in CSS-Pixeln?
- 393 × 851 im Hochformat (Breite × Höhe) und 851 × 393 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 Xiaomi 13?
- Mit den Standard-Breakpoints von Tailwind liegt das Xiaomi 13 im Hochformat bei unter sm (unter 640 px) und im Querformat bei md (ab 768 px).
- Kann ich meine Website auf dem Xiaomi 13 in VS Code als Vorschau anzeigen?
- Ja. Der Rahmen Xiaomi 13 gehört zu Mobile Preview Pro (6,99 €, Einmalzahlung). Die kostenlose Version enthält das iPhone 16, iPhone 17 und iPhone 17 Pro Max.
Alle Gerätegrößen · EN · FR · ES · PT