{"id":106,"date":"2026-04-20T10:14:12","date_gmt":"2026-04-20T10:14:12","guid":{"rendered":"https:\/\/wp.als080717od.hemsida.eu\/?p=106"},"modified":"2026-04-20T10:14:12","modified_gmt":"2026-04-20T10:14:12","slug":"m05-3-2-anvandande-av-anvandaragenter-och-utvecklingsverktyg","status":"publish","type":"post","link":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/04\/20\/m05-3-2-anvandande-av-anvandaragenter-och-utvecklingsverktyg\/","title":{"rendered":"M05.3.2 Anv\u00e4ndande av anv\u00e4ndaragenter och utvecklingsverktyg"},"content":{"rendered":"\n

P\u00e5 denna inl\u00e4mningsuppgiften ska jag kolla hur min landing page ser ut p\u00e5 mobiltelefoner och tablet p\u00e5 2 olika webbl\u00e4sare f\u00f6r att se hur man anv\u00e4nder sig av anv\u00e4ndaragenter och utvecklingsverktyg, och hur anpassad min landing page \u00e4r.<\/p>\n\n\n\n

Sidan p\u00e5 Iphone 14\/15\/16 p\u00e5 Firefox<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sidan p\u00e5 Ipad Air p\u00e5 Firefox<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sidan p\u00e5 Iphone 14 Pro max p\u00e5 Google Chrome<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sidan p\u00e5 Ipad Air p\u00e5 Google Chrome<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Validering och mobilv\u00e4nlighetstest p\u00e5 min landing page<\/h2>\n\n\n\n

Nu t\u00e4nkte jag validera koden f\u00f6r sidan samt kolla hur mobilv\u00e4nlig sidan verkligen \u00e4r via Bings mobilv\u00e4nlighets test.<\/p>\n\n\n\n

P\u00e5 bilden under har jag validerat HTML koden, allt funkar men jag fick en varning f\u00f6r att jag inte har st\u00e4llt in spr\u00e5ket p\u00e5 sidan.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

H\u00e4r \u00e4r den validerade CSS koden:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Allt validerade korrekt vilket \u00e4r bra men det betyder inte att sidan fungerar lika bra p\u00e5 alla enheter s\u00e5som mobiler. Nu ska jag testa Bings mobilv\u00e4nlighetsverktyg.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Som man kan se s\u00e5 funkar inte min landing page bra p\u00e5 mobiler trots att sidan validerar korrekt. Anledningen till detta \u00e4r att n\u00e4r jag byggde sidan s\u00e5 anv\u00e4nde jag absoluta enheter s\u00e5som pixlar f\u00f6r att skapa marginaler, padding, h\u00f6jd och bredd bland annat. Detta inneb\u00e4r att storlekar p\u00e5 en 1080p sk\u00e4rm \u00e4r samma storlek som p\u00e5 en mobil. Detta g\u00f6r att sidan ser konstig ut, och sv\u00e5r att anv\u00e4nda d\u00e5 storlekar p\u00e5 l\u00e4nkar och knappar blir f\u00f6r sm\u00e5.<\/p>\n\n\n\n

N\u00e5gon g\u00e5ng fram\u00f6ver kanske det \u00e4r v\u00e4rt att kika in p\u00e5 min CSS och byta ut absoluta enheter mot relativa s\u00e5 att den \u00e4r v\u00e4nligare p\u00e5 mindre enheter. Jag m\u00e5ste ocks\u00e5 l\u00e4gga in detta i min HTML kod: <meta name=”viewport” content=”width=device-width, initial-scale=1″><\/em>, denna koden ger webbl\u00e4sare instruktionen att st\u00e4lla in sidans bredd till den exakta bredden av sk\u00e4rmen, och “initial-scale=1<\/em>” s\u00e4ger att sidan ska laddas in med 100% zoom. Detta f\u00f6rhindrar att webbl\u00e4saren laddar in sidan p\u00e5 st\u00f6rre storlekar f\u00f6r att sedan krympa ner den, vilket ofta \u00e4r orsaken att text och l\u00e4nkar blir sm\u00e5 p\u00e5 webbsidor som inte har anpassats.<\/p>\n","protected":false},"excerpt":{"rendered":"

P\u00e5 denna inl\u00e4mningsuppgiften ska jag kolla hur min landing page ser ut p\u00e5 mobiltelefoner och tablet p\u00e5 2 olika webbl\u00e4sare f\u00f6r att se hur man anv\u00e4nder sig av anv\u00e4ndaragenter och utvecklingsverktyg, och hur anpassad min landing page \u00e4r. Sidan p\u00e5 Iphone 14\/15\/16 p\u00e5 Firefox Sidan p\u00e5 Ipad Air p\u00e5 Firefox Sidan p\u00e5 Iphone 14 Pro […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-106","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":2,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}