Responsive Design View

  • Revision slug: Tools/Responsive_Design_View
  • Revision title: Responsive Design View
  • Revision id: 416749
  • Created:
  • Creator: brennannovak
  • Is current revision? No
  • Comment

Revision Content

{{ fx_minversion_header("15.0") }}

The Responsive Design View makes it easy to see how your designs will look on different sized screens. Responsive designs adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets. The screenshot below is an example of the mozilla.org website viewed with a 320 by 480 content area.

The Responsive Design View is convenient because you can quickly change the size of the content area without changing the size of your browser window. Changing the browser window's size can be annoying because all of your tabs also change size, and you have less space in the window for developer tools.

To enable the Responsive Design View:

  • On the Tools menu, choose Web Developer, and then Responsive Design View.
  • On the keyboard, press ctrl-shift-M on Windows or Linux, or cmd-option-M on Macintosh.

To disable the Responsive Design View:

  • On the Tools menu, choose Web Developer, and then Responsive Design View.
  • On the keyboard, press Esc.

While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.

At the top of the Responsive Design View, there is a pull-down menu of preset sizes that are convenient for quickly seeing what your design looks at a number of common screen sizes. There's also a rotate button to instantly switch the width and height (similar to rotating a mobile phone or tablet).

You can use the resize handle at the lower right of the content area to change the size of the content area.

Revision Source

<p>{{ fx_minversion_header("15.0") }}</p>
<p>The Responsive Design View makes it easy to see how your designs will look on different sized screens. <a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive designs</a> adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets. The screenshot below is an example of the <a href="http://mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a> website viewed with a 320 by 480 content area.</p>
<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="width: 372px; height: 628px; float: left; padding-right: 2em;">The Responsive Design View is convenient because you can quickly change the size of the content area without changing the size of your browser window. Changing the browser window's size can be annoying because all of your tabs also change size, and you have less space in the window for developer tools.</p>
<p>To enable the Responsive Design View:</p>
<ul style="margin-left: 40px;">
  <li>On the <strong>Tools</strong> menu, choose <strong>Web Developer</strong>, and then <strong>Responsive Design View</strong>.</li>
  <li>On the keyboard, press ctrl-shift-M on Windows or Linux, or cmd-option-M on Macintosh.</li>
</ul>
<p>To disable the Responsive Design View:</p>
<ul>
  <li>On the <strong>Tools</strong> menu, choose <strong>Web Developer</strong>, and then <strong>Responsive Design View</strong>.</li>
  <li>On the keyboard, press Esc.</li>
</ul>
<p>While the Responsive Design View is enabled, you can continue browsing as you normally would in the resized content area.</p>
<p>At the top of the Responsive Design View, there is a pull-down menu of preset sizes that are convenient for quickly seeing what your design looks at a number of common screen sizes. There's also a rotate button to instantly switch the width and height (similar to rotating a mobile phone or tablet).</p>
<p>You can use the resize handle at the lower right of the content area to change the size of the content area.</p>
Revert to this revision