Hoe de mobiele versie van een website op een pc te bekijken

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 blijven eerder op een site of kopen iets als het visueel aantrekkelijk is. Een desktopweergave kan u ook helpen om bewerkingen uit te voeren en mogelijke problemen sneller op te lossen.

Hoe de mobiele versie van een website op een pc te bekijken

Gelukkig is dit een relatief eenvoudig proces. In dit artikel laten we u zien hoe u een mobiele versie van een website kunt bekijken op verschillende apparaten en browsers.

Hoe de mobiele versie van een website in Chrome op een Mac te bekijken

In Chrome kunt u de front-end testen en kijken of alle componenten van de website correct werken door een ingebouwde ontwikkelaarstool genaamd DevTools te gebruiken. Omdat het vooraf gedefinieerde apparaatkeuzes biedt, is DevTools de beste manier voor de ontwikkelaar om snel de weergave van desktop naar mobiel te verplaatsen en vice versa zonder extensies voor ontwikkelaars.

U kunt ook de schermgrootte aanpassen aan uw behoeften en de schermbreedte en -hoogte aanpassen om te zien hoe uw website eruitziet op verschillende schermformaten. Volg deze stappen om dit op een Mac te doen:

  1. Start de Google Chrome-browser en ga naar de site die u wilt bekijken.
    Hoe de mobiele versie van een website op een pc te bekijken
  2. Druk op F12 op je toetsenbord om toegang te krijgen tot DevTools.
    Hoe de mobiele versie van een website op een pc te bekijken
  3. Wanneer de modus is ingeschakeld, klikt u op het pictogram "Apparaatemulatie in-/uitschakelen".
    Hoe de mobiele versie van een website op een pc te bekijken
  4. U kunt kiezen uit een lijst met iOS- en Android-apparaten om ze te emuleren.
    Hoe de mobiele versie van een website op een pc te bekijken
  5. Het toont de website in de mobiele vorm die u hebt gekozen.
    Hoe de mobiele versie van een website op een pc te bekijken

Wanneer u klaar bent, sluit u gewoon het venster met ontwikkelaarstools om de mobiele versie van de website te sluiten.

Hoe u de mobiele versie van een website in Chrome op een Windows-pc kunt bekijken

Als u een mobiele versie van een website op een Windows-pc in Chrome wilt bekijken, is dit een vergelijkbaar proces:

  1. Open de Chrome-browser.
    Hoe de mobiele versie van een website op een pc te bekijken
  2. Ga in Chrome naar de website die je in de mobiele versie wilt zien.
  3. Klik met de rechtermuisknop op de webpagina en selecteer "Inspecteren" in het menu.
    Hoe de mobiele versie van een website op een pc te bekijken
  4. Om naar Developer Tools te gaan, klikt u op het tabblad "Meer Tools" en selecteert u "Developer Tools" of drukt u op F12 om DevTools te openen.
    Hoe de mobiele versie van een website op een pc te bekijken
  5. Het venster Developer Tools wordt geopend.
  6. Klik op het apparaatschakelpictogram om over te schakelen naar de weergavemodus voor mobiele sites.
    Hoe de mobiele versie van een website op een pc te bekijken
  7. Kies het mobiele apparaat dat u wilt emuleren (optioneel).
    Hoe de mobiele versie van een website op een pc te bekijken
  8. U kunt nu de afmetingen van het scherm aanpassen aan uw wensen.

Hoe u de mobiele versie van een website in Chrome op een Chromebook kunt bekijken

Toegang tot de mobiele versie van een website in Chrome met behulp van een Chromebook lijkt sterk op de eerste twee methoden.

  1. Open de Google Chrome-webbrowser.
    Hoe de mobiele versie van een website op een pc te bekijken
  2. Open de webpagina die u wilt openen op uw mobiele apparaat.
    Hoe de mobiele versie van een website op een pc te bekijken
  3. Klik op het verticale pictogram met drie stippen om het menu te openen.
    Hoe de mobiele versie van een website op een pc te bekijken
  4. Sleep uw muis over het item Meer hulpprogramma's in de lijst.
    Hoe de mobiele versie van een website op een pc te bekijken
  5. Selecteer 'Hulpprogramma's voor ontwikkelaars'.
    Hoe de mobiele versie van een website op een pc te bekijken
  6. Het venster Developer Tools in de browser wordt geopend.
    Hoe de mobiele versie van een website op een pc te bekijken
  7. Schakel de weergavemodus van de mobiele site in door op het pictogram Apparaat wisselen te klikken.
    Hoe de mobiele versie van een website op een pc te bekijken

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 telkens 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 website met responsief ontwerp te evalueren. Meestal zal dit alternatief echter niet acceptabel lijken.

Dat is waar de webontwikkelingsmogelijkheden van de Firefox-browser goed van pas komen. U kunt in meerdere resoluties door uw webpagina's bladeren als u weet hoe u mobiele versies van websites in Firefox kunt openen. Volg deze stappen:

  1. Open de mobiele versie van de website die u wilt zien.
  2. Klik met de rechtermuisknop op de webpagina en selecteer de optie "Inspecteren" in het menu.
    Hoe de mobiele versie van een website op een pc te bekijken
  3. Kies de "Responsieve ontwerpmodus".
    Hoe de mobiele versie van een website op een pc te bekijken
  4. Kies de schermgrootte van de website.
    Hoe de mobiele versie van een website op een pc te bekijken

Hoe u de mobiele versie van een website in Firefox op een Windows-pc kunt bekijken

Windows-pc's hebben ook de mogelijkheid om mobiele versies van websites te bekijken met Firefox. Ga als volgt te werk:

  1. Start Firefox op uw pc.
    Hoe de mobiele versie van een website op een pc te bekijken
  2. Ga naar de website die je als mobiele versie wilt zien.
    Hoe de mobiele versie van een website op een pc te bekijken
  3. Ga naar "Instellingen" door op het horizontale pictogram met drie balkjes te klikken.
    Hoe de mobiele versie van een website op een pc te bekijken
  4. U ziet een vervolgkeuzemenu waarin u de optie "Webontwikkelaar" moet kiezen.
    Hoe de mobiele versie van een website op een pc te bekijken
  5. Selecteer 'Responsieve ontwerpmodus'.
    Hoe de mobiele versie van een website op een pc te bekijken
  6. Ten slotte kunt u een smartphonemodel selecteren om te zien hoe uw site op dat apparaat wordt weergegeven.
    Hoe de mobiele versie van een website op een pc te bekijken

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.

  1. Start de Safari-browser.
    Hoe de mobiele versie van een website op een pc te bekijken
  2. Ga naar de website die je als mobiele versie wilt bekijken.
    Hoe de mobiele versie van een website op een pc te bekijken
  3. Klik op "Opties" en vervolgens op het menu "Ontwikkelen".
    Hoe de mobiele versie van een website op een pc te bekijken
  4. Kies in het vervolgkeuzemenu 'Voer responsieve ontwerpmodus in'.
    Hoe de mobiele versie van een website op een pc te bekijken
  5. U kunt nu de mobiele versie van de website bekijken.
    Hoe de mobiele versie van een website op een pc te 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 uit te proberen zonder een computer te gebruiken. De stappen om de mobiele versie naar de desktopversie in Chrome te verplaatsen, zijn als volgt:

1. Ga naar de website die u in desktopweergave wilt zien.

2. Tik op het pictogram met 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 je gebruikt.

Mobiel webdesign gemakkelijker 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. Met de responsive modus kun je verschillende onderdelen aanpassen en de website voor meerdere schermformaten maken.

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 om 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 hiervoor het liefst? Laat het ons weten in de comments hieronder.

Sign up and earn $1000 a day ⋙

Leave a Comment

Wat is VPN? Voor- en nadelen van VPN en virtueel privénetwerk

Wat is VPN? Voor- en nadelen van VPN en virtueel privénetwerk

Wat is VPN en wat zijn de voor- en nadelen ervan? Laten we met WebTech360 de definitie van VPN bespreken en hoe we dit model en systeem in de praktijk kunnen toepassen.

De meeste mensen gebruiken deze verborgen functies in Windows-beveiliging niet.

De meeste mensen gebruiken deze verborgen functies in Windows-beveiliging niet.

Windows Security biedt meer dan alleen bescherming tegen basisvirussen. Het beschermt tegen phishing, blokkeert ransomware en voorkomt dat schadelijke apps worden uitgevoerd. Deze functies zijn echter niet gemakkelijk te vinden: ze zitten verborgen achter verschillende menulagen.

Coderen is niet zo moeilijk als je denkt

Coderen is niet zo moeilijk als je denkt

Zodra u het onder de knie hebt en zelf hebt uitgeprobeerd, zult u merken dat encryptie ontzettend makkelijk te gebruiken is en ontzettend praktisch in het dagelijks leven.

Herstel verwijderde gegevens met Recuva Portable in Windows 7

Herstel verwijderde gegevens met Recuva Portable in Windows 7

In het volgende artikel presenteren we de basisbewerkingen voor het herstellen van verwijderde gegevens in Windows 7 met de ondersteunende tool Recuva Portable. Met Recuva Portable kunt u uw gegevens opslaan op een handige USB-stick en gebruiken wanneer u ze nodig hebt. De tool is compact, eenvoudig en gebruiksvriendelijk en beschikt over de volgende functies:

Hoe u dubbele bestanden verwijdert om computergeheugen te besparen met CCleaner

Hoe u dubbele bestanden verwijdert om computergeheugen te besparen met CCleaner

CCleaner scant binnen enkele minuten op dubbele bestanden en laat u vervolgens beslissen welke u veilig kunt verwijderen.

Waarom moet ik de standaard downloadlocatie in Windows 11 wijzigen?

Waarom moet ik de standaard downloadlocatie in Windows 11 wijzigen?

Door de downloadmap van station C naar een ander station in Windows 11 te verplaatsen, verkleint u de capaciteit van station C en werkt uw computer soepeler.

Windows-updates op uw pc stoppen

Windows-updates op uw pc stoppen

Op deze manier kunt u uw systeem zodanig afstemmen dat updates plaatsvinden volgens uw eigen schema, en niet dat van Microsoft.

Hoe u bestandsextensies kunt weergeven, bestandsextensies kunt bekijken in Windows

Hoe u bestandsextensies kunt weergeven, bestandsextensies kunt bekijken in Windows

Windows Verkenner biedt talloze opties om de weergave van bestanden te wijzigen. Wat u misschien niet weet, is dat één belangrijke optie standaard is uitgeschakeld, ook al is deze cruciaal voor de beveiliging van uw systeem.

5 gratis tools om spyware en adware op uw pc te vinden

5 gratis tools om spyware en adware op uw pc te vinden

Met de juiste hulpmiddelen kunt u uw systeem scannen en spyware, adware en andere schadelijke programma's verwijderen die mogelijk op uw systeem aanwezig zijn.

14 Windows-apps en software die u nodig hebt op uw nieuwe computer

14 Windows-apps en software die u nodig hebt op uw nieuwe computer

Hieronder vindt u een lijst met aanbevolen software voor het installeren van een nieuwe computer. Zo kunt u de belangrijkste en beste applicaties voor uw computer kiezen!

Hoe u Windows-instellingen kunt klonen om uw workflow overal mee naartoe te nemen

Hoe u Windows-instellingen kunt klonen om uw workflow overal mee naartoe te nemen

Het kan erg handig zijn om een ​​compleet besturingssysteem op een flashdrive te hebben staan, vooral als je geen laptop hebt. Maar denk niet dat deze functie beperkt is tot Linux-distributies - het is tijd om je Windows-installatie te klonen.

Schakel deze 7 Windows-services uit om de batterijduur te verlengen!

Schakel deze 7 Windows-services uit om de batterijduur te verlengen!

Door een aantal van deze services uit te schakelen, kunt u aanzienlijk besparen op de batterijduur, zonder dat dit uw dagelijkse gebruik beïnvloedt.

Wat is het nut van de sneltoets Ctrl+Z in Windows? Waarschijnlijk meer dan je denkt.

Wat is het nut van de sneltoets Ctrl+Z in Windows? Waarschijnlijk meer dan je denkt.

Ctrl + Z is een veelgebruikte toetsencombinatie in Windows. Met Ctrl + Z kunt u in principe alle handelingen in Windows ongedaan maken.

Klik niet op een verkorte link voordat u zeker weet dat deze veilig is!

Klik niet op een verkorte link voordat u zeker weet dat deze veilig is!

Verkorte URL's zijn handig om lange links op te schonen, maar ze verbergen ook de werkelijke bestemming. Als je malware of phishing wilt vermijden, is het niet verstandig om zomaar op die link te klikken.

Windows 11 22H2: Moment 1-update met veel opvallende features

Windows 11 22H2: Moment 1-update met veel opvallende features

Na lang wachten is de eerste grote update van Windows 11 officieel uitgebracht.