Compare Revisions

Responsive Design View

Revision 453407:

Revision 453407 by wbamberg on

Revision 470303:

Revision 470303 by wbamberg on

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

Revision 453407
Revision 470303
n14      <img alt="" src="https://mdn.mozillademos.org/files/5863/ren14      <img alt="" src="https://mdn.mozillademos.org/files/6137/re
>sponsive-design-view.png" style="width: 955px; height: 779px; dis>sponsive-design-view.png" style="width: 917px; height: 797px; dis
>play: block; margin-left: auto; margin-right: auto;">The Responsi>play: block; margin-left: auto; margin-right: auto;">The Responsi
>ve Design View is convenient because you can quickly change the s>ve Design View is convenient because you can quickly and precisel
>ize of the content area without changing the size of your browser>y change the size of the content area.
> window. Changing the browser window's size can be annoying becau 
>se all of your tabs also change size, and you have less space in  
>the window for developer tools. 
15    </p>
16    <p>
17      Of course, you could just resize the browser window: but ma
 >king the browser window smaller makes all your other tabs smaller
 > too, and can make the browser's interface much harder to use.
n19    <h2>n22    <h2 id="Enabling_and_disabling">
nn45    <h2>
46      Resizing
47    </h2>
n43      <img alt="" src="https://mdn.mozillademos.org/files/5865/ren49      You can resize the content area in one of two ways:
>sponsive-design-view-controls.png" style="width: 412px; height: 3 
>16px;float:right;"> 
50    </p>
51    <ul>
52      <li>using the <a href="#select-size">"Select size" control<
 >/a>
53      </li>
54      <li>clicking and dragging on the controls on the right and 
 >bottom sides of the content area, or in the bottom-right corner
55      </li>
56    </ul>
57    <p>
58      From Firefox 26 onwards, 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.
n50        Along the top of the window in which Responsive Design Vin65        <img alt="" src="https://mdn.mozillademos.org/files/6139/
>ew displays the page, there are three controls:>responsive-design-view-controls.png" style="width: 545px; height:
 > 356px; float: right;">Along the top of the window in which Respo
 >nsive Design View displays the page, there are five controls:
t52      <ul>t67      <table class="standard-table">
68        <tbody>
69          <tr>
70            <td>
71              <strong>Close</strong>
72            </td>
73            <td>
53        <li>Close: close Responsive Design View and return to nor74              Close Responsive Design View and return to normal b
>mal browsing>rowsing
75            </td>
54        </li>76          </tr>
55        <li>Select size: choose from a number of preset width x h77          <tr>
>eight combinations, or define your own. As an alternative, on the 
> right and bottom sides of the window, and in the bottom-right co 
>rner, are controls you can grip and drag with the mouse. 
78            <td>
79              <strong><a name="select-size" id="select-size">Sele
 >ct size</a></strong>
80            </td>
81            <td>
82              Choose from a number of preset width x height combi
 >nations, or define your own.
83            </td>
56        </li>84          </tr>
85          <tr>
86            <td>
87              <strong>Portrait/Landscape</strong>
88            </td>
89            <td>
57        <li>Rotate: switch the screen between portrait and landsc90              Switch the screen between portrait and landscape vi
>ape view.>ew.
91            </td>
58        </li>92          </tr>
93          <tr>
94            <td>
95              <p>
96                <strong>Simulate touch events</strong>
97              </p>
98              <div class="geckoVersionNote">
99                <p>
100                  New in Firefox 26
101                </p>
102              </div>
103            </td>
104            <td>
105              <p>
106                Enable/disable touch event simulation: while touc
 >h event simulation is enabled, mouse events are translated into <
 >a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch 
 >events</a>.
107              </p>
108            </td>
109          </tr>
110          <tr>
111            <td>
112              <p>
113                <strong>Take screenshot</strong>
114              </p>
115              <div class="geckoVersionNote">
116                <p>
117                  New in Firefox 26
118                </p>
119              </div>
120            </td>
121            <td>
122              Take a screenshot of the content area.
123            </td>
124          </tr>
125        </tbody>
59      </ul>126      </table>

Back to History