---
title: Bildschirmgrößen testen
slug: Tools/Responsive_Design_Mode
translation_of: Tools/Responsive_Design_Mode
original_slug: Tools/bildschirmgroessen-testen
---
<div>{{ToolsSidebar}}</div><p><a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive Designs</a> 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.</p>

<p>Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png">Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.</p>

<p>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.</p>

<p>Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.</p>

<h2 id="Aktivieren_und_deaktivieren">Aktivieren und deaktivieren</h2>

<p>Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:</p>

<ul>
 <li>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</li>
 <li>Klicken Sie auf die Schaltfläche "Bildschirmgrößen testen" in der <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Symbolleiste der Werkzeugleiste</a>.</li>
</ul>

<p>Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:</p>

<ul>
 <li>Wählen Sie den Menüpunkt "Bildschirmgrößen testen" erneut aus</li>
 <li>Drücken Sie die Escape-Taste auf der Tastatur</li>
 <li>Klicken Sie auf die x-Schaltfläche in der oberen, linken Ecke des Fensters.</li>
</ul>

<h2 id="Skalieren">Skalieren</h2>

<p>Sie können die Inhaltsfläche auf eine von zwei Arten ändern:</p>

<ul>
 <li>indem Sie die <a href="#select-size">Größe mit der Auswahliste festlegen</a></li>
 <li>indem Sie die Bedienelemente auf der rechten und unteren Seite der Inhaltsfläche, oder in der unteren, rechten Ecke, anklicken und verschieben</li>
</ul>

<p>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.</p>

<div style="overflow: hidden;">
<h2 id="Bedienelemente_der_Ansicht">Bedienelemente der Ansicht</h2>
<img alt="" src="https://mdn.mozillademos.org/files/7525/bildschirmgroessen-testen-steuerungselemente.png" style="float: right; height: 356px; width: 545px;">
<p>Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>Schließen</strong></td>
   <td>Schließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück</td>
  </tr>
  <tr>
   <td><strong><a name="select-size">Größe auswählen</a></strong></td>
   <td>Wählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.</td>
  </tr>
  <tr>
   <td><strong>Drehen</strong></td>
   <td>Drehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.</td>
  </tr>
  <tr>
   <td>
    <p><strong>Berührungsereignisse simulieren</strong></p>
   </td>
   <td>
    <p>"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">Berührungsereignisse</a> umgewandelt.</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Bildschirmfoto erstellen</strong></p>
   </td>
   <td>Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>