Hur man visar webbsidor som på mobilen med Google Chrome

Smartphonemarknaden slutar inte växa. Även Google belönar alla "webbvänliga" sidor i sina sökmotorresultat. Av denna anledning är fler och fler webbplatser optimerade för att öppnas korrekt på alla typer av mobila enheter, även om man lämnar skrivbordsversionerna åt sidan eller begränsar vissa funktioner eller något innehåll i dem. Webbläsare, som t.ex Google krom , upptäck var vi laddar en webbplats från (en PC, en mobil, surfplatta, etc.), och begär motsvarande version från servern. Men som tur är är det väldigt lätt att lura servern.

När vi använder webbläsaren är vi vanligtvis vana vid att skriva en URL i den, eller göra en fråga direkt i sökmotorn och vänta på resultatet. Men vet vi verkligen allt som händer därunder när vi gör det här?

visa webbsidor som på mobilen med Google Chrome

Chrome Developer Console

Alla webbläsare, speciellt Chrome, har alla möjliga funktioner och verktyg för alla användare. En av dem är utvecklingskonsol . Som namnet antyder är detta en konsol designad så att webbdesigners kan se hur deras webbplats fungerar, i detalj veta allt som händer på frontend och testa olika ändringar och justeringar på sidan "i farten".

Vi kan öppna den här konsolen när som helst genom att helt enkelt trycka på F12-nyckel på vårt tangentbord. Vi kan också öppna den här konsolen genom att högerklicka var som helst på en sida och välja ” Inspektera ” eller med kortkommandot Kontroll + Skift + I. Detta öppnas (som standard, även om vi kan ändra det) i den högra delen av fönstret, och därifrån kommer vi att kunna se ett stort antal alternativ.

Google Chrome - Web como en el móvil 1

Vi ska kunna se hela HTML-koden av sidan som vi har öppen, alla element som bildar den, var och en av kopplingarna som görs med servern, sidans prestanda, minnet den förbrukar ... Absolut allt som är relaterat till webben.

Vi kan lägga till element i koden , ändra vilken punkt som helst på sidan, eliminera innehåll som inte intresserar oss, se fel, upptäcka möjliga flaskhalsar eller problem som kan påverka SEO negativt på webben ... möjligheterna är oändliga. Vi kan till och med injicera kod direkt på sidan från din konsol för att se hur den svarar.

Naturligtvis måste vi komma ihåg att ändringarna vi gör från denna konsol är lokala. Vi hackar inte webbplatsen i fråga, och vi sparar inte heller några ändringar. För att ladda om sidan igen måste vi helt enkelt trycka på F5 för att uppdatera den, så återgår den till sitt ursprungliga tillstånd.

För att stänga konsolen kan vi använda F12-tangenten igen, eller helt enkelt klicka på stängningsknappen som vi hittar i den övre högra delen av denna utvecklingskonsol.

Ändra visningstypen för en webbplats

Ett av de mest intressanta verktygen som vi kan hitta inom denna utvecklingskonsol är möjligheten att ändra typen av enhet som simulerar laddningen av sidan. Som standard kommer Chrome att använda egenskaperna för vår PC (det vill säga att indikera för servern att vi är en dator och, beroende på skärmens upplösning och proportion kommer att visa motsvarande sida) för att visa sidan. Men om webben är responsiv kan detta förändras.

För att göra detta, vad vi kommer att göra är att öppna utvecklingsverktygen som vi just har sett i föregående punkt, och vi kommer att titta på en liten ikon som visas i den övre vänstra delen av det avsnittet.

Google Chrome - Web como en el móvil 2

Den här ikonen gör att vi snabbt kan ändra typen av webbläsares vy. Så fort vi klickar på den kommer vi att kunna se hur storleken på sidan ändras , och det sätt på vilket elementen laddas. Om det inte gör det kan vi behöva trycka på F5 för att ladda om.

Google Chrome - Web como en el móvil 3

Överst kan vi se en stapel från vilken vi kan ändra olika aspekter av denna mobilvy. Vi kan till exempel simulera hur webben skulle se ut på en specifik enhet , eller justera zoomnivåerna. Vi kan också manuellt specificera skärmens mått, i pixlar, om inget av alternativen som kommer som standard anpassar sig till det vi letar efter.

Google Chrome - Web como en el móvil 4

En mycket intressant knapp som vi också kan hitta är den som låter oss rotera datorskärmen. Så vi kan se hur webben skulle se ut när användare spelar den i liggande läge.

Google Chrome - Web como en el móvil 5

När vi har gjort de tester vi vill kan vi helt enkelt gå ur detta läge genom att stänga utvecklarkonsolen. Återigen kan vi behöva uppdatera sidan för att den ska visas korrekt igen.

Chrome förlängningar

Förutom att använda utvecklarkonsolen kommer vi även att kunna göra detta med hjälp av några tillägg som vi kan hitta helt gratis i Chrome Store. Några av de bästa är följande:

Mobile View Switcher

Det här tillägget låter oss växla mellan normalvyn och mobilvyn med ett klick. När du installerar den skapar den en ikon i verktygsfältet, som fungerar som en switch beroende på om vi vill ha den aktiverad eller avaktiverad. Som standard simulerar den en iOS 14-systemet, men vi kan modifiera det och justera tillägget efter eget tycke.


Responsiv Viewer

Ett annat mycket användbart verktyg för utvecklare för att kontrollera hur väl deras responsiva webbplatser fungerar. Detta gör att vi kan se flera skärmar, av olika storlekar, samtidigt. På så sätt kan vi ha flera konfigurationer i sikte och kontrollera att allt ser korrekt ut och inte ger problem i någon typ av enhet.


Mobilsimulator för Chrome

Detta verktyg låter oss simulera ett stort antal riktiga enheter (5 Android modeller, 15 Apple, 4 surfplattor och 4 specialenheter) för att kunna se hur sidorna ser ut beroende på vilken CSS som efterfrågas enligt storleken på skärmen var och en.


Responsiv webbdesigntestare

Slutligen tillåter detta tillägg, även om det är mindre känt, oss att grundligt testa hur responsiva vyer av en webbplats fungerar utifrån flera olika parametrar. Det låter oss testa med olika mobiler, inklusive som standard de vanligaste upplösningarna och proportionerna. Dessutom skickar detta tillägg lämplig User-Agent till servern så att resultaten blir mer exakta. Det fungerar till och med offline, något som inte alla tillägg gör.