Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Bildschirmgrößen testen

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.

Bedienelemente der Ansicht

Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:

Schließen Schließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück
Größe auswählen Wählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.
Drehen Drehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.

Berührungsereignisse simulieren

"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in Berührungsereignisse umgewandelt.

Bildschirmfoto erstellen

Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.

 

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: mozjan
 Zuletzt aktualisiert von: mozjan,