blob: 2158a40f5416338957266d41df2def17ed59b196 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
---
title: Responsive Design View
slug: Tools/Responsive_Design_View
translation_of: Tools/Responsive_Design_Mode
---
<p><a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive design</a> past zich aan verschillende beeldgroottes aan om een presentatie te voorzien dat werkt voor verschillende soorten apparaten, zoals mobiele telefoons of tablets. Het Responsive Design View maakt het gemakkelijk om te zien hoe jouw website of app er zou uitzien op verschillende beeldgroottes.</p>
<p>{{EmbedYouTube("LBcE72sG2s8")}}</p>
<p>Het screenshot hieronder laat een mobiele versie zien van een Wikipedia-pagina met een grootte van 320 op 480.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png"></p>
<p>Het Responsive Design View werkt vlot omdat je snel en precies de grootte van het beeld kan aanpassen.</p>
<p>Je kan natuurlijk ook de grootte van het browservenster aanpassen; maar als je het browservenster kleiner maakt, maak je ook de andere tabs kleiner, zo wordt het moeilijker om de browserinterface te gebruiken.</p>
<p>Als het Responsive Design View is ingeschakeld, kan je verder surfen in het verkleinde beeld.</p>
<h2 id="Aan-_en_afzetten">Aan- en afzetten</h2>
<p>Er zijn drie manieren om Responsive Design View mode aan te zetten:</p>
<ul>
<li>Selecteer "Responsive Design View" in het Web Developer submenu in het Firefox Menu (of in het Tools menu als de menubalk zichtbaar is of je met OS X werkt)</li>
<li>Druk op de "Responsive Design View" knop in de <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox's toolbar</a></li>
<li>Druk op Ctrl + Shift + M, (of Cmd + Opt + M bij OS X)</li>
</ul>
<p>en drie manieren om Responsive Design View af te zetten:</p>
<ul>
<li>Selecteer het "Responsive Design View" menu item opnieuw</li>
<li>Klik op de "sluit"-knop in de linkerbovenhoek van het venster</li>
<li>Druk op Ctrl + Shift + M, (of Cmd + Opt + M bij OS X). Voor Firefox 34, kon "Escape" ook gebruikt worden om het Responsive Design View te sluiten.</li>
</ul>
<h2 id="Vergroten_verkleinen">Vergroten / verkleinen</h2>
<p>Je kan het inhoudsvlak vergroten of verkleinen op twee manieren:</p>
<ul>
<li>via de <a href="#select-size">"Select size" dropdown lijst</a></li>
<li>door de rechter- en/of onderkant van het venstertje te verslepen</li>
</ul>
<p>Als je de grootte aanpast door de zijkanten te verslepen, kan je Control (Cmd bij OS X) ingedrukt houden om de snelheid van de aanpassing te vertragen. Dit maakt het gemakkelijker om een precieze grootte te selecteren.</p>
<div style="overflow: hidden;">
<h2 id="Responsive_Design_View_controls">Responsive Design View controls</h2>
<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="width: 545px; height: 356px; display: block; margin-left: auto; margin-right: auto;">Aan de bovenkant van het venstertje van het Responsive Design View, staan vijf knoppen:</p>
<table class="standard-table">
<tbody>
<tr>
<td><strong>Sluiten</strong></td>
<td>Sluit het Responsive Design View<strong> en browse verder zoals voordien.</strong></td>
</tr>
<tr>
<td><strong><a name="select-size">Select size</a></strong></td>
<td>
<p>Kies een voorgemaakte combinatie tussen breedte en hoogte of maak er zelf één.</p>
<p><br>
Vanaf Firefox 33 zijn de nummers die hier staan direct aanpasbaar. Zo kan je gemakkelijk eigen dimensies toevoegen.</p>
</td>
</tr>
<tr>
<td><strong>Portret/Landschap</strong></td>
<td>Wissel het scherm tussen een portret view en een landschap view.</td>
</tr>
<tr>
<td>
<p><strong>Simuleer touch events</strong></p>
</td>
<td>
<p>Schakel touch event simulatie in of uit: als touch event simulatie is ingeschakeld, worden muis events omgezet naar <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p>
</td>
</tr>
<tr>
<td>
<p><strong>Neem een screenshot</strong></p>
</td>
<td>Neem een screenshot van het inhoudsgebied.
<p>Screenshots worden opgeslagen in de standaard downloadlocatie van Firefox.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
