mozilla

Compare Revisions

Responsive Design View

Change Revisions

Revision 339827:

Revision 339827 by kohei.yoshino on

Revision 348159:

Revision 348159 by jswisher on

Title:
Responsive Design View
Responsive Design View
Slug:
Tools/Responsive_Design_View
Tools/Responsive_Design_View
Tags:
"Tools", "Responsive Design", "Web Development"
"Tools", "Responsive Design", "Web Development"
Content:

Revision 339827
Revision 348159
n11      The Responsive Design View makes it easy to see how your den11      The Responsive Design View makes it easy to see how your de
>signs will look on different sized screens. <a href="/en-US/docs/>signs will look on different sized screens. <a href="/en-US/docs/
>Web_Development/Responsive_Web_design">Responsive designs</a> wil>Web_Development/Responsive_Web_design">Responsive designs</a> ada
>l adapt to different screen sizes to provide a presentation that >pt to different screen sizes to provide a presentation that is su
>is suitable for different kinds of devices, such as mobile phones>itable for different kinds of devices, such as mobile phones or t
>. The screenshot below is an example of the <a href="http://mozil>ablets. The screenshot below is an example of the <a href="http:/
>la.org" title="/en-US/docs/Localizing_extension_metadata_on_addon>/mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on
>s.mozilla.org">mozilla.org</a> website viewed with a 320 by 480 c>_addons.mozilla.org">mozilla.org</a> website viewed with a 320 by
>ontent area.> 480 content area.
n14      <img alt="" src="/files/3877/Responsive%20Design%20View.pngn14      <img alt="" src="/files/3877/Responsive%20Design%20View.png
>" style="width: 372px; height: 628px; float: left; padding-right:>" style="width: 372px; height: 628px; float: left; padding-right:
> 2em">The Responsive Design View is convenient because you can qu> 2em">The Responsive Design View is convenient because you can qu
>ickly change the size of the content area without changing the si>ickly change the size of the content area without changing the si
>ze of your browser window. Changing the browser window's size can>ze of your browser window. Changing the browser window's size can
> get annoying because all of your tab sizes change then and you a> be annoying because all of your tabs also change size, and you h
>lso have less space in the window for developer tools.>ave less space in the window for developer tools.
t17      You can find the Responsive Design View in the Web Developet17      To enable the Responsive Design View:
>r menu. Alternatively, you can use the ctrl-alt-M shortcut on Win 
>dows or Linux or cmd-opt-M on Mac to start up the Responsive Desi 
>gn View. Pressing the &lt;esc&gt; key will close the view. While  
>you're in the Responsive Design View, you can continue browsing a 
>s normal in the resized content area. 
18    </p>
19    <ul style="margin-left: 40px;">
20      <li>On the <strong>Tools</strong> menu, choose <strong>Web 
 >Developer</strong>, and then <strong>Responsive Design View</stro
 >ng>.
21      </li>
22      <li>On the keyboard, press ctrl-alt-M on Windows or Linux, 
 >or cmd-option-M on Macintosh.
23      </li>
24    </ul>
25    <p>
26      To disable the Responsive Design View:
27    </p>
28    <ul>
29      <li>On the <strong>Tools</strong> menu, choose <strong>Web 
 >Developer</strong>, and then <strong>Responsive Design View</stro
 >ng>.
30      </li>
31      <li>On the keyboard, press Esc.
32      </li>
33    </ul>
34    <p>
35      While the Responsive Design View is enabled, you can contin
 >ue browsing as you normally would in the resized content area.

Back to History