Med massor av plugins och nyckelfärdiga lösningar där ute, kan varje webmaster enkelt vända omkopplaren och aktivera mobiltemat för deras hemsida. Problemet är hur kan webmaster kolla hur hans / hennes webbplats ser ut på en mobilenhet om han / hon inte äger en smartphone? Fret inte, med lite knep kan du enkelt använda din skrivbords-webbläsare för att komma åt din webbplats och få det att tro att du använder en mobil webbläsare.

Varje webbläsare levereras med egen användaragent. De flesta servrar använder webbläsarens användaragent för att avgöra var användaren är från och servera webbsidan i enlighet med detta. Om den upptäcker att användaren använder en mobil webbläsare, kommer den att tjäna upp mobiltemat (om mobiltemat är aktiverat). Genom att ändra användaragenten på din skrivbordswebbläsare till den hos en mobil webbläsare kan du få servern att tro att du använder en mobilenhet.

Visa mobiltema i Firefox

I Firefox rekommenderar jag addon för User Agent Switcher, eftersom den är förinstallerad med iPhone-användaragenten och du kan enkelt byta till den.

Efter installationen av förlängningen och omstart av din Firefox, gå till " Verktyg -> Standardanvändare -> iPhone ".

Uppdatera nu till din webbplats och du bör se mobiltematet i åtgärd.

För att lägga till Android- agenten i listan, gå till " Verktyg -> Standardanvändare -> Redigera användaragenter ".

Klicka på knappen "Ny -> Ny användaragent" och ange följande:

Beskrivning : Android
Användaragent : Mozilla / 5.0 (Linux; U; Android 2.2; en-gb; Nexus One Build / FRF50)
AppleWebKit / 533.1 (KHTML, som Gecko) Version / 4.0 Mobile Safari / 533.1

Återstående poster kan du behålla dem till standardvärdet.

(För iPad är användaragenten Mozilla / 5.0 (iPad; U; CPU OS 3_2 som Mac OS X; en-us) AppleWebKit / 531.21.10 (KHTML, som Gecko) Version / 4.0.4 Mobile / 7B334b Safari / 531.21 .10 )

Nästa tillägg du ska använda är Firesizer. Med denna förlängning kan du ändra storlek på din webbläsare till en viss skärmupplösning så att du kan se hur din webbplats görs i olika skärmstorlekar.

Efter installationen kan du hitta resize-alternativet längst ner till höger i webbläsaren. Högerklicka på den och välj Anpassa.

Du kan lägga till ny skärmstorlek i listan. För din kännedom:

iPhone 4 har en skärmupplösning på 960 x 640 (H till W, så du borde ange 640 x 960)
iPhone 3GS och nedan har en skärmupplösning på 480 x 320 (H till W, så du borde skriva in 320 x 480)
Nexus One (Android) har en skärmupplösning på 800 x 480 (H till W, så du borde skriva in 480 x 800)

När du har lagt till skärmupplösningen kan du nu se din webbplats i mobildräkten och i rätt skärmstorlek direkt på din skrivbords-webbläsare.

Obs! Ovanstående tillägg fungerar bara i Firefox 3.6. * Och nedan. De är inte kompatibla med Firefox 4 beta.

Ovanstående tricks kan upprepas på andra webbläsare som Opera och Safari. Google Chrome tillåter dig inte att ändra användaragenten (du kan kolla in detta hack men), så du kommer inte att kunna använda ovanstående tricks.

Hur testar du ditt mobiltema?