MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Responsive design 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.

Het screenshot hieronder laat een mobiele versie zien van een Wikipedia-pagina met een grootte van 320 op 480.

Het Responsive Design View werkt vlot omdat je snel en precies de grootte van het beeld kan aanpassen.

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.

Als het Responsive Design View is ingeschakeld, kan je verder surfen in het verkleinde beeld.

Aan- en afzetten

Er zijn drie manieren om Responsive Design View mode aan te zetten:

  • 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)
  • Druk op de "Responsive Design View" knop in de Toolbox's toolbar
  • Druk op Ctrl + Shift + M, (of Cmd + Opt + M bij OS X)

en drie manieren om Responsive Design View af te zetten:

  • Selecteer het "Responsive Design View" menu item opnieuw
  • Klik op de "sluit"-knop in de linkerbovenhoek van het venster
  • 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.

Vergroten / verkleinen

Je kan het inhoudsvlak vergroten of verkleinen op twee manieren:

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.

Responsive Design View controls

Aan de bovenkant van het venstertje van het Responsive Design View, staan vijf knoppen:

Sluiten Sluit het Responsive Design View en browse verder zoals voordien.
Select size

Kies een voorgemaakte combinatie tussen breedte en hoogte of maak er zelf één.


Vanaf Firefox 33 zijn de nummers die hier staan direct aanpasbaar. Zo kan je gemakkelijk eigen dimensies toevoegen.

Portret/Landschap Wissel het scherm tussen een portret view en een landschap view.

Simuleer touch events

Schakel touch event simulatie in of uit: als touch event simulatie is ingeschakeld, worden muis events omgezet naar touch events.

Neem een screenshot

Neem een screenshot van het inhoudsgebied.

Screenshots worden opgeslagen in de standaard downloadlocatie van Firefox.

 

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: bassam, JimiVerhaegen
 Laatst bijgewerkt door: bassam,