Responsive Design View

  • Revision slug: Tools/Responsive_Design_View
  • Revision title: Responsive Design View
  • Revision id: 421945
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment -StylingProblem

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.

Enable 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.

Disable 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).

Modify Responsive Size Presets

The Responsive Design View tool comes preloaded with a number of sizes for web, tablet, and mobile design resolutions. However, you may want to add custom presets for a new device with a different resolution (iPhone5 compared to iPhone4). In order to do this, do the following:

  1. Select the option with (custom) at the end of the current size
  2. Use the resize handle at the lower right of the content area to change the size of the content area.
  3. Once desired resolution is created, choose Add Preset at the bottom of the sizes dropdown menu

Revision Source

<div>{{fx_minversion_header("15.0")}}</div>
<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="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>

<div style="overflow:hidden">
<h2 id="Enable_Responsive_Design_View" name="Enable_Responsive_Design_View">Enable Responsive Design View</h2>
<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>


<h2 id="Disable_Responsive_Design_View" name="Disable_Responsive_Design_View">Disable Responsive Design View</h2>
<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>



<h2 id="Modify_Responsive_Size_Presets" name="Modify_Responsive_Size_Presets">Modify Responsive Size Presets</h2>
<p>The Responsive Design View tool comes preloaded with a number of sizes for web, tablet, and mobile design resolutions. However, you may want to add custom presets for a new device with a different resolution (iPhone5 compared to iPhone4). In order to do this, do the following:</p>
<ol>
  <li>Select the option with (custom) at the end of the current size</li>
  <li>Use the resize handle at the lower right of the content area to change the size of the content area.</li>
  <li>Once desired resolution is created, choose <strong>Add Preset</strong> at the bottom of the sizes dropdown menu</li>
</ol>
</div>
Revert to this revision