Responsive Designs passen sich an verschiedene Bildschirmgrößen an um auf verschiedenen Arten von Geräten, wie zum Beispiel Mobilgeräte oder Tablets, angemessen dargestellt zu werden. Die Ansicht "Bildschirmgrößen testen" macht es einfach zu sehen, wie Ihre Webseite oder Web-App auf verschiedenen Bildschirmgrößen aussehen wird.
Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.
Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.
Natürlich könnten Sie einfach die größe Ihres Browser-Fensters ändern: aber wenn Sie dies tun, werden dann auch alle anderen Registerkarten im Registerkartenreiter verkleinert, was die Bedienung der Benutzeroberfläche des Browsers viel schwerer macht.
Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.
Aktivieren und deaktivieren
Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:
- Wählen Sie "Bildschirmgrößen testen" vom Web-Entwickler-Untermenü im Firefox-Menü (oder Extras-Menü, wenn die Menüleiste aktiviert ist oder Sie Mac OS X benutzen) aus
- Klicken Sie auf die Schaltfläche "Bildschirmgrößen testen" in der Symbolleiste der Werkzeugleiste.
Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:
- Wählen Sie den Menüpunkt "Bildschirmgrößen testen" erneut aus
- Drücken Sie die Escape-Taste auf der Tastatur
- Klicken Sie auf die x-Schaltfläche in der oberen, linken Ecke des Fensters.
Skalieren
Sie können die Inhaltsfläche auf eine von zwei Arten ändern:
- indem Sie die Größe mit der Auswahliste festlegen
- indem Sie die Bedienelemente auf der rechten und unteren Seite der Inhaltsfläche, oder in der unteren, rechten Ecke, anklicken und verschieben
Wenn Sie mit der zweiten Methode die Ansicht skalieren, können Sie die Funktionstaste (Steuertaste auf Mac OS X) gedrückt halten um die Größe beim Skalieren zu verfeinern. Dies macht das Auswählen der Größe viel präziser.
