Als u een webontwikkelaar bent of een online bedrijf heeft, wilt u misschien weten hoe een mobiele site eruitziet op een desktop. Het uiterlijk en de functionaliteit van uw mobiele site kunnen cruciaal zijn, aangezien meer dan de helft van het internetverkeer afkomstig is van telefoons. Klanten zullen eerder op een site blijven of iets kopen als het visueel aantrekkelijk is. Een bureaubladweergave kan u ook helpen om bewerkingen uit te voeren en mogelijke problemen sneller op te lossen.
Gelukkig is dit een relatief eenvoudig proces. In dit artikel laten we u zien hoe u een mobiele versie van een website op verschillende apparaten en browsers kunt bekijken.
Hoe de mobiele versie van een website in Chrome op een Mac te bekijken
In Chrome kunt u de front-end testen en zien of alle componenten van de website correct werken met behulp van een ingebouwde ontwikkelaarstool genaamd DevTools. Omdat het voorgedefinieerde apparaatkeuzes biedt, is DevTools de beste manier voor de ontwikkelaar om snel de weergave van desktop naar mobiel te verschuiven en vice versa zonder enige ontwikkelaarsextensies.
U kunt ook de schermgrootte aanpassen aan uw behoeften en de schermbreedte en -hoogte aanpassen om te zien hoe uw website eruit zal zien op verschillende schermformaten. Volg deze stappen om dit op een Mac te doen:
- Start de Google Chrome-browser en ga naar de site die u wilt bekijken.
- Druk op F12 op je toetsenbord om toegang te krijgen tot DevTools.
- Wanneer de modus is ingeschakeld, klikt u op het pictogram Apparaatemulatie wisselen.
- U kunt kiezen uit een lijst met iOS- en Android-apparaten om ze te emuleren.
- Het toont de website in de mobiele vorm die je hebt gekozen.
Als u klaar bent, sluit u gewoon het venster met ontwikkelaarstools om de mobiele versie van de website te sluiten.
Hoe de mobiele versie van een website in Chrome op een Windows-pc te bekijken
Als u een mobiele versie van een website op Windows-pc in Chrome wilt bekijken, is het een vergelijkbaar proces:
- Open de Chrome-browser.
- Ga in Chrome naar de website die je in de mobiele versie wilt zien.
- Klik met de rechtermuisknop op de webpagina en selecteer Inspecteren in het menu.
- Om naar Developer Tools te gaan, klikt u op het tabblad More Tools en selecteert u Developer Tools of drukt u op F12 om DevTools te openen.
- Het venster Ontwikkelaarstools wordt geopend.
- Klik op het apparaatwisselpictogram om over te schakelen naar de weergavemodus voor mobiele sites.
- Kies het mobiele apparaat dat u wilt emuleren (optioneel).
- U kunt nu de afmetingen van het scherm aanpassen aan uw behoeften.
Hoe de mobiele versie van een website in Chrome op een Chromebook te bekijken
Toegang tot de mobiele versie van een website in Chrome met een Chromebook lijkt sterk op de eerste twee methoden.
- Open de Google Chrome-webbrowser.
- Open de webpagina die u wilt openen op uw mobiele apparaat.
- Klik op het verticale pictogram met drie stippen om het menu te openen.
- Sleep uw muis over het item Meer tools in de lijst.
- Selecteer Ontwikkelaarstools.
- Het venster Developer Tools in de browser wordt geopend.
- Schakel de weergavemodus voor mobiele sites in door op het pictogram Apparaat wisselen te klikken.
Hierdoor wordt de gebruikersinterface voor de mobiele site weergegeven. U kunt ook de gewenste apparaatervaring kiezen door het merk en model te selecteren in de vervolgkeuzelijst. De webpagina wordt vernieuwd als een desktopsite wanneer u de console voor ontwikkelaarstools sluit.
Hoe de mobiele versie van een website in Firefox op een Mac te bekijken
U kunt andere webbrowsers zoals Firefox gebruiken om een mobiele site op een Mac-desktop te bekijken. Het formaat van het browservenster wijzigen is een van de methoden die de meeste webontwikkelaars gebruiken om de responsieve ontwerpwebsite te evalueren. Meestal zal dit alternatief echter niet acceptabel lijken.
Dat is waar de webontwikkelingsmogelijkheden van de Firefox-browser van pas komen. U kunt in meerdere resoluties door uw webpagina's bladeren als u weet hoe u toegang krijgt tot mobiele versies van websites in Firefox. Volg deze stappen:
- Open de mobiele versie van de website die u wilt zien.
- Klik met de rechtermuisknop op de webpagina en selecteer de optie Inspecteren in het menu.
- Kies de responsieve ontwerpmodus.
- Kies de schermgrootte van de website.
Hoe de mobiele versie van een website in Firefox op een Windows-pc te bekijken
Windows-pc's hebben ook de mogelijkheid om mobiele versies van websites te bekijken met Firefox. Hier leest u hoe u dit doet:
- Start Firefox op uw pc.
- Ga naar de website die je als mobiele versie wilt zien.
- Ga naar Instellingen door op het horizontale pictogram met drie streepjes te klikken.
- U ziet een vervolgkeuzemenu waarin u een optie voor webontwikkelaars moet kiezen.
- Selecteer Responsieve ontwerpmodus.
- Ten slotte kunt u een smartphonemodel selecteren om te zien hoe uw site op dat apparaat zal verschijnen.
Hoe de mobiele versie van een website in Safari op een Mac te bekijken
We hebben besproken hoe u een mobiele website op een desktop kunt bekijken met Chrome en Firefox. Maar hoe zit het met de standaardbrowser die bij Mac-apparaten wordt geleverd, Safari? Gelukkig is het ook mogelijk om een mobiele versie van een website in Safari te bekijken.
- Start de Safari-browser.
- Ga naar de website die je als mobiele versie wilt bekijken.
- Klik op Opties en vervolgens op het menu Ontwikkelen.
- Kies in het vervolgkeuzemenu Enter Responsive Design Mode.
- U kunt nu de mobiele versie van de website bekijken.
Aanvullende veelgestelde vragen
Kan ik de desktopversie van een website op mijn telefoon bekijken?
Het antwoord is ja! U kunt overschakelen van de mobiele versie naar de desktopversie om het te bekijken zonder een computer te gebruiken. De stappen om de mobiele versie over te zetten naar de desktopversie in Chrome zijn als volgt:
1. Ga naar de website die u in desktopweergave wilt zien.
2. Tik op het pictogram met de drie stippen om het menu te openen.
3. Selecteer nu de optie Bureaubladweergave.
Houd er rekening mee dat deze stappen kunnen variëren, afhankelijk van de telefoon die u gebruikt.
hoe iemand toe te voegen aan een groepstekst
Het ontwerpen van mobiele websites eenvoudiger maken
De ontwikkelaarstools zijn geweldig om een mobiele versie van een website op een desktop te analyseren en aan te passen zonder van apparaat te wisselen. U kunt de schermgrootte wijzigen om te zien hoe de componenten op verschillende apparaten werken. U kunt verschillende onderdelen aanpassen en de website maken voor meerdere schermformaten met behulp van de responsieve modus.
Bij het ontwerpen van een website moet de ontwerper altijd in gedachten houden hoe de voorkant van de site eruitziet op telefoons, tablets en desktops. Het gebruik van de methoden die in het artikel worden beschreven, kan de ontwikkelaar ook helpen dit te doen en ook te identificeren welke componenten van een website problemen veroorzaken om deze op te lossen.
Heb je ooit geprobeerd een mobiele versie van een site op je desktop te bekijken? Welke browser gebruik je daarvoor het liefst? Laat het ons weten in de comments hieronder.
