Met talloze plug-ins en kant-en-klare oplossingen die er zijn, kan elke webmaster eenvoudig de schakelaar omdraaien en het mobiele thema voor hun website activeren. Het probleem is, hoe kan de webmaster controleren hoe zijn / haar site eruit ziet op een mobiel apparaat, als hij / zij geen smartphone bezit? Maak je geen zorgen, met een beetje bedrog kun je gemakkelijk je desktopbrowser gebruiken om toegang te krijgen tot je site en hem laten denken dat je een mobiele browser gebruikt.

Elke browser wordt geleverd met een eigen user-agent. De meeste servers gebruiken de user-agent van de browser om te bepalen waar de gebruiker vandaan komt en dienen de webpagina dienovereenkomstig. Als het detecteert dat de gebruiker een mobiele browser gebruikt, wordt het mobiele thema weergegeven (als het mobiele thema is geactiveerd). Door de user-agent van uw desktopbrowser te veranderen in die van een mobiele browser, kunt u de server laten denken dat u een mobiel apparaat gebruikt.

Bekijken van mobiel thema in Firefox

In Firefox raad ik de User Agent Switcher-addon aan omdat deze vooraf is geïnstalleerd met de iPhone-user-agent en u er gemakkelijk naar kunt overschakelen.

Na het installeren van de extensie en het herstarten van je Firefox, ga je naar " Extra -> Standaard User Agent -> iPhone ".

Vernieuw nu uw site en u zou het mobiele thema in actie moeten zien.

Als u de Android- agent aan de lijst wilt toevoegen, gaat u naar " Extra -> Standaardgebruikersagent -> Gebruikersagenten bewerken ".

Klik op de knop "Nieuw -> Nieuwe gebruikersagent" en voer het volgende in:

Beschrijving : Android
Gebruikersagent : Mozilla / 5.0 (Linux; U; Android 2.2; nl; gb; Nexus One Build / FRF50)
AppleWebKit / 533.1 (KHTML, zoals Gecko) Versie / 4.0 Mobiele Safari / 533.1

De resterende items kunt u ze op de standaardwaarde houden.

(Voor iPad is de user-agent Mozilla / 5.0 (iPad; U; CPU OS 3_2 zoals Mac OS X; en-us) AppleWebKit / 531.21.10 (KHTML, like Gecko) Versie / 4.0.4 Mobile / 7B334b Safari / 531.21 .10 )

De volgende extensie die je gaat gebruiken, is Firesizer. Met deze extensie kunt u de grootte van uw browser aanpassen aan een opgegeven schermresolutie, zodat u kunt zien hoe uw site wordt weergegeven op verschillende schermformaten.

Na de installatie vindt u de optie voor het wijzigen van de grootte rechtsonder in de browser. Klik er met de rechtermuisknop op en selecteer Aanpassen.

U kunt een nieuw schermformaat aan de lijst toevoegen. Voor uw referentie:

iPhone 4 heeft een schermresolutie van 960 x 640 (H bij W, dus je moet 640 x 960 invoeren)
iPhone 3GS en lager heeft een schermresolutie van 480 x 320 (H bij W, dus je moet 320 x 480 invoeren)
Nexus One (Android) heeft een schermresolutie van 800 x 480 (H bij W, dus u moet 480 x 800 invoeren)

Nadat u de schermresolutie hebt toegevoegd, kunt u nu uw website in zijn mobiele pak en op de juiste schermgrootte bekijken, rechtstreeks in uw desktopbrowser.

Opmerking : de bovenstaande add-ons werken alleen in Firefox 3.6. * En lager. Ze zijn niet compatibel met Firefox 4 beta.

De bovenstaande trucs kunnen worden herhaald in andere browsers, zoals Opera en Safari. Google Chrome staat niet toe dat je de user-agent wijzigt (je kunt deze hack echter wel bekijken), dus je kunt de bovenstaande trucs niet gebruiken.

Hoe test je je mobiele thema?