Revision 1028572 of Responsive Design Mode

<p><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. Responsive Design Mode makes it easy to see how your website or web app will look on different screen sizes.</p>

<p>The screenshot below shows a page on the mobile version of Wikipedia viewed with a 320 by 480 content area.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png" /></p>

<p>Responsive Design Mode is convenient because you can quickly and precisely change the size of the content area.</p>

<p>Of course, you could just resize the browser window: but making the browser window smaller makes all your other tabs smaller too, and can make the browser's interface much harder to use.</p>

<p>While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.</p>

<h2 id="Enabling_and_disabling">Enabling and disabling</h2>

<p>There are three ways to enable Responsive Design Mode:</p>

<ul>
 <li>Select "Responsive Design View" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS&nbsp;X)</li>
 <li>Press the "Responsive Design View" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox's toolbar</a></li>
 <li>Press Ctrl + Shift + M, (or Cmd + Opt + M on OS X)</li>
</ul>

<p>and three ways to switch off Responsive Design Mode:</p>

<ul>
 <li>Select the "Responsive Design View" menu item again</li>
 <li>Click the "close" button in the top-left corner of the window</li>
 <li>Press Ctrl + Shift + M, (or Cmd + Opt + M on OS X). Prior to Firefox 34, Escape would also close Responsive Design View.</li>
</ul>

<h2 id="Resizing">Resizing</h2>

<p>You can resize the content area in one of two ways:</p>

<ul>
 <li>using the <a href="#select-size">"Select size" control</a></li>
 <li>clicking and dragging on the controls on the right and bottom sides of the content area, or in the bottom-right corner</li>
</ul>

<p>If you resize using click-and-drag you can hold down the Control key (Cmd on Max OS X) to slow down the speed at which the area resizes. This makes it easier to set the size precisely.</p>

<div style="overflow:hidden">
<h2 id="Responsive_Design_Mode_controls">Responsive Design Mode controls</h2>

<p><img alt="" src="https://mdn.mozillademos.org/files/12734/responsive-design-mode-controls.svg" style="height:241px; width:688px" /></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="display:block; height:356px; margin-left:auto; margin-right:auto; width:545px" />Along the top of the window in which Responsive Design Mode displays the page, there are five controls:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>Close</strong></td>
   <td>Close Responsive Design Mode and return to normal browsing.</td>
  </tr>
  <tr>
   <td><strong><a name="select-size">Select size</a></strong></td>
   <td>
    <p>Choose from a number of preset width x height combinations, or define your own.</p>

    <p>From Firefox 33 onwards, the numbers displayed here are directly editable, so you can easily define custom dimensions.</p>
   </td>
  </tr>
  <tr>
   <td><strong>Portrait/Landscape</strong></td>
   <td>Switch the screen between portrait and landscape view.</td>
  </tr>
  <tr>
   <td>
    <p><strong>Simulate touch events</strong></p>
   </td>
   <td>
    <p>Enable/disable touch event simulation: while touch event simulation is enabled, mouse events are translated into <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Take screenshot</strong></p>
   </td>
   <td>Take a screenshot of the content area.
    <p>Screenshots are saved to Firefox's default download location.</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p>&nbsp;</p>