På denna inlämningsuppgiften ska jag kolla hur min landing page ser ut på mobiltelefoner och tablet på 2 olika webbläsare för att se hur man använder sig av användaragenter och utvecklingsverktyg, och hur anpassad min landing page är.
Sidan på Iphone 14/15/16 på Firefox
Sidan på Ipad Air på Firefox
Sidan på Iphone 14 Pro max på Google Chrome
Sidan på Ipad Air på Google Chrome
Validering och mobilvänlighetstest på min landing page
Nu tänkte jag validera koden för sidan samt kolla hur mobilvänlig sidan verkligen är via Bings mobilvänlighets test.
På bilden under har jag validerat HTML koden, allt funkar men jag fick en varning för att jag inte har ställt in språket på sidan.
Här är den validerade CSS koden:
Allt validerade korrekt vilket är bra men det betyder inte att sidan fungerar lika bra på alla enheter såsom mobiler. Nu ska jag testa Bings mobilvänlighetsverktyg.
Som man kan se så funkar inte min landing page bra på mobiler trots att sidan validerar korrekt. Anledningen till detta är att när jag byggde sidan så använde jag absoluta enheter såsom pixlar för att skapa marginaler, padding, höjd och bredd bland annat. Detta innebär att storlekar på en 1080p skärm är samma storlek som på en mobil. Detta gör att sidan ser konstig ut, och svår att använda då storlekar på länkar och knappar blir för små.
Någon gång framöver kanske det är värt att kika in på min CSS och byta ut absoluta enheter mot relativa så att den är vänligare på mindre enheter. Jag måste också lägga in detta i min HTML kod: <meta name=”viewport” content=”width=device-width, initial-scale=1″>, denna koden ger webbläsare instruktionen att ställa in sidans bredd till den exakta bredden av skärmen, och “initial-scale=1” säger att sidan ska laddas in med 100% zoom. Detta förhindrar att webbläsaren laddar in sidan på större storlekar för att sedan krympa ner den, vilket ofta är orsaken att text och länkar blir små på webbsidor som inte har anpassats.
Leave a Reply