CSS-Kurs / Responsive CSS mit Breite, Zoom und Tastatur prüfen

Responsive CSS sollte bei unterschiedlichen Ansichtsfensterbreiten, Zoomstufen und Eingabebedingungen weiterhin nutzbar bleiben. Prüfen Sie auf abgeschnittene Inhalte, unerwartetes Scrollen der Seite, versteckte Steuerungen und unsichtbaren Tastaturfokus, anstatt sich nur auf eine einzige Vorschau in Telefongröße zu verlassen.

Bereiten Sie eine Seite für Responsive-Prüfungen vor

Die in der vorherigen Lektion gelernten Flussgrößen, Media-Queries und Bildverhältnisse werden auf einer Seite gesammelt. Wenn Sie den folgenden Code als responsive-check.html speichern, können Sie Menüs, Karten, Bilder, lange Zeichenketten und Eingabeformulare zusammen sehen. Das Bild ist in der Datei enthalten, und es wird keine separate Bibliothek oder Server benötigt.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

Diese Seite wurde ursprünglich erstellt, um keinen horizontalen Überlauf zu haben. In späteren Übungen werden wir die Ursache finden, indem wir das CSS, das den Fehler erzeugt, nacheinander hinzufügen und entfernen. Wenn Sie die Originaldatei kopieren und als responsive-check-original.html belassen, ist es einfach, Änderungen rückgängig zu machen, falls Sie verschiedene Eigenschaften versehentlich ändern. Die Formularübermittlung ist ein Beispiel, das nicht an einen Speicher-Server gesendet wird, und verwendet die vorgeschlagene Testadresse anstelle tatsächlicher persönlicher Informationen.

Prüfen Sie verschiedene Breiten und Breakpoint-Grenzen

Öffnen Sie in Edge die Entwicklertools, aktivieren Sie die Geräteemulation und geben Sie eine Breite im Responsive-Modus ein. Standard-Windows-Tastenkombinationen sind F12 oder Strg+Shift+I für die Entwicklertools und Strg+Shift+M für die Geräteemulation. Symbolleistenbeschriftungen und -positionen können je nach Version variieren; konsultieren Sie den Microsoft Edge-Geräteemulationsleitfaden. Vergleichen Sie die Breiten direkt unterhalb und oberhalb jeder Bedingung aus Media Queries und inhaltsabhängige Breakpoints.

1. Bei 320px und 390px überprüfen Sie, ob das Menü mehrere Zeilen einnimmt und ob das Bild und das Eingabefeld in den Text passen. Scrollen Sie ganz nach unten und achten Sie auf Textabschneidung und horizontales Scrollen auf der gesamten Seite.
2. Erhöhen Sie langsam die Breite und überprüfen Sie Bereiche, in denen die Karten zu schmal sind oder unnötiger Platz zwischen den Menüs vorhanden ist. Sie wählen am Ende nicht nur ein paar Geräte aus.
3. Dieses Beispiel wechselt bei 42rem. Mit einer anfänglichen Schriftgröße von 16px vergleichen Sie 671px, 672px und 673px: 671px sollte eine Karten-Spalte haben, während 672px und 673px zwei haben sollten.
4. Auf breiteren Bildschirmen wie 1365px und 1920px überprüfen Sie, ob die maximale Textbreite beibehalten wird und die Zeilen nicht zu lang sind. Abgesehen von der Geräteemulation überprüfen Sie Betrieb, virtuelle Tastatur und Bildschirmdrehung auf dem tatsächlich verwendeten Gerät.

Gerätesimulation ist ein Annäherungswerkzeug, das die Breite und einige Bedingungen ändert. Es repliziert nicht alle Schriftarten, Touch-Steuerelemente, virtuelle Tastatur und das Verhalten des Browsers eines echten Geräts. Wir empfehlen, dass Sie die Eingabesituation überprüfen, bei der die virtuelle Tastatur am unteren Bildschirmrand des tatsächlichen Geräts erscheint.

Getrennte Änderungen der Browser-Zoomstufe und der Textgröße

Wenn die Browser-Zoomstufe erhöht wird, kann sich auch die Breite des Viewports ändern, die CSS verwenden kann. Zoomen Sie mit Strg und + in Windows, und stellen Sie die Standardvergrößerung mit Strg+0 wieder her. Die Einstellung der Schriftgröße oder das Vergrößern nur der Schrift ist eine Voraussetzung, um die Beziehung zwischen Text und Box getrennt zu überprüfen. Experimente mit der Änderung der Schriftgröße von HTML in CSS sollten nicht als Browser-Zoom aufgezeichnet werden.

1. Notieren Sie die Bildschirmbreite bei der Standardskalierung im tatsächlichen Browserfenster und skalieren Sie sie auf 200%. Überprüfen Sie, ob der Text im Menütext, in der Kartenbeschreibung, im Label, im Eingabefeld und im Button nicht abgeschnitten oder überlappend ist.
2. Stellen Sie sicher, dass Ihre Inhalte auch bei höheren Vergrößerungen lesbar sind. Wenn sie auf 400 % basierend auf einer Breite von 1280 CSS-Pixeln vergrößert werden, entspricht der Platz ungefähr 320 CSS-Pixeln, der tatsächliche Wert kann jedoch je nach Browser-Benutzeroberfläche, Scrollleiste usw. variieren.
3. Stellen Sie die standardmäßige Skalierung wieder her und prüfen Sie erneut, indem Sie die Schriftarteinstellungen Ihres Browsers erheblich ändern. Die Bedingungen und Ergebnisse der Änderung der Standardschriftart, der Vergrößerung der Seite und der Modifikation von CSS werden als separate Punkte aufgezeichnet.

Barrierefreiheitsprüfungen umfassen das Beibehalten von Inhalt und Funktion bei 200 % Textvergrößerung und das Umfließen von normalem vertikal scrollendem Inhalt innerhalb des Äquivalents von 320 CSS-Pixeln ohne bidirektionales Scrollen. Inhalte wie eine Datentabelle oder eine Karte können eine gerechtfertigte zweidimensionale Ausnahme haben, aber diese Ausnahme gilt nicht automatisch für die gesamte Seite. Für weitere Details siehe W3C Erklärung zur Schriftgrößenanpassung, die W3C-Erklärung zu Reflow und seinen Ausnahmen überprüfen.

Horizontalen Überlauf reproduzieren und diagnostizieren

Fügen Sie einfach die folgende Deklaration am Ende Ihres ursprünglichen CSS hinzu und öffnen Sie es bei 390px. Die erste Karte benötigt mindestens 40rem, daher passt sie nicht auf den Bildschirm. Wählen Sie die Karte mit der Elementauswahl in den Entwicklertools aus und überprüfen Sie die berechnete Breite und min-width.

.card:first-child { min-width: 40rem; }

Dieses Problem lässt sich möglicherweise nicht einfach lösen, indem man die Grid-Spalten verkleinert. Dies liegt daran, dass das Element selbst eine Mindestbreite benötigt. Wenn Sie die hinzugefügte Deklaration entfernen, kehrt sie zum ursprünglichen min-width: 0 zurück. Überprüfen Sie horizontalen Scrollen und die Karteanzeige bei derselben Bildschirmbreite noch einmal.

Nach der Wiederherstellung fügen Sie dieses Mal einfach die folgende Deklaration hinzu: Überprüfen Sie, wo lange Bezeichner überlaufen, und entfernen Sie die zusätzlichen Deklarationen, um wieder overflow-wrap: anywhere anzuwenden. Zwei Probleme auf einmal zu behandeln, macht es schwierig zu erkennen, welche Änderung es gelöst hat. Die feste Mindestbreite und die Handhabung langer Zeichenfolgen werden zwischen der Anleitung zu Überlauf, langen Zeichenfolgen und Auslassungszeichen als getrennte Ursachen behandelt.

.card { overflow-wrap: normal; }

Sie können schnell überprüfen, ob die gesamte Seite mit den unten angegebenen Werten überläuft, indem Sie die Konsole verwenden. Wenn die Zahl rechts größer ist als die links, ist dies ein Hinweis darauf, die Ursache zu untersuchen. Diese Überprüfung vergleicht nur die Breite des Dokuments und sagt nicht sofort, welches Element sie verursacht; der beabsichtigte horizontale Scrollbereich und versteckte Elemente müssen ebenfalls separat bestimmt werden.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Finden Sie Inhalte, die durch feste Höhen abgeschnitten werden

Fügen Sie dem wiederhergestellten Original ohne Breitenfehler die folgende Regel am Ende hinzu. Beobachten Sie, dass die Beschreibung oder der Link am unteren Rand der ersten Karte abgeschnitten ist. Die Kombination aus fester Höhe und Verbergen ist besonders problematisch, da vergrößerter Text oder lange Beschreibungen die erforderliche Höhe erhöhen.

.card:first-child { height: 10rem; overflow: hidden; }

Entfernen Sie die hinzugefügte Deklaration, um zur automatischen Höhe basierend auf dem Inhalt zurückzukehren. Selbst wenn das Designziel darin besteht, die Höhe kurzer Karten anzupassen, vermeiden Sie das Kürzen von Informationen. Überprüfen Sie Alternativen wie das Festlegen einer Mindesthöhe, um leeren Platz zuzulassen, oder passen Sie Platzierungsbedingungen an, und prüfen Sie erneut auf lange Sätze und Vergrößerungsbedingungen. Das Verbergen des horizontalen Scrollens oder das kontinuierliche Verkleinern der Schriftgröße, um das Problem zu verschleiern, ist aus demselben Grund keine erste Wahl.

Überprüfen Sie die Tastaturnavigation und protokollieren Sie die Ergebnisse

Nach dem Öffnen einer neuen Seite verwenden Sie Tab, um nacheinander zum Menü, zum Kartenlink, zum E-Mail-Eingabefeld und zu den Schaltflächen zu gelangen. Rückwärts mit Shift+Tab bewegen und sicherstellen, dass der Fokusrahmen sichtbar ist. Stellen Sie sicher, dass die Navigation zu Elementen außerhalb des Bildschirms entsprechend scrollt und dass keine festen Menüs oder andere Elemente den Fokus vollständig blockieren. Wenn Sie die visuelle Reihenfolge mit CSS ändern, stellen Sie sicher, dass dies nicht mit der HTML-Lesereihenfolge/der Tastaturreihenfolge kollidiert.

Diese Tabelle ist ein Beispiel dafür, wie man Aufzeichnungen führt, und die tatsächlichen Prüfergebnisse werden in jeder Umgebung überprüft und eingetragen. Selbst wenn dokumentiert wird, dass keine Probleme aufgetreten sind, müssen die implementierten Bedingungen beibehalten werden, damit sie mit nachfolgenden Änderungen verglichen werden können. Indem man Breite, Vergrößerung, Inhalt und Tastaturbedienung separat überprüft und die ursprünglichen Fehlerbedingungen nach der Korrektur erneut testet, können Probleme reduziert werden, die leicht übersehen werden, wenn man nur einen Bildschirm betrachtet.