Så här aktiverar du Smartphone-kapacitet på webbplatser

Internetanvändning via mobila enheter har ökat sedan lanseringen av Apple iPhone. På grund av de olika skärmstorlekarna för mobila enheter och deras pekskärmsgränssnitt visas eller fungerar inte webbplatser på en mobilenhet på samma sätt som de visas eller fungerar på en datorskärm. För att upprätthålla läsaren skapar du en smartphoneversion av din webbplats med hjälp av kaskad stilark.

Begränsningar av Smartphone Browsing

Smartphone-surfning skiljer sig från datorbaserad surfning på två viktiga sätt. För det första är den tillgängliga skärmstorleken på en smartphone mycket mindre än den är på en dator, vilket innebär att vissa webbplatser kommer att visas röriga eller i vissa fall oläsliga på en smartphone. En smartphone-användare måste rulla ner eller zooma in på en webbplats som är optimerad för datorvisning. För det andra svarar smartphones på peksklick istället för markörrörelse, och så kan webbelement som ändras baserat på markörrörelser vara problematiska på en smartphone. Exempelvis kommer element som ändras när markören svänger över dem inte att verka på önskad väg på en smartphone eftersom svängning gör ingenting på en smartphone. Dessutom kan rullgardinsmenyer vara problematiska för vissa smartphone-användare.

CSS relativa storlekar

Om du ändrar storleken på vissa delar på din webbplats behöver du bara ändra CSS-filen för din webbplats. För smartphone läsbarhet, ändra dina CSS dimensioner och teckenstorlekar till relativa enheter i stället för absoluta enheter. Till exempel bör bredden och höjden av några specifika element anges i procent i stället för pixlar. Detta kommer att göra storlekar på grundval av en procentandel av webbläsarfönstret eller moderelementet. För typsnittstorlekar, använd ems istället för pixlar. En em är lika med den aktuella teckensnittstorleken i pixlar. Därför är två ems två gånger den nuvarande teckensnittstypen och så vidare. Dessa ändringar bör sparas i en separat CSS-fil.

CSS Display Properties

För att helt gömma ett element från din webbplats, lägg till egenskapen "visa: none" till det elementets CSS-stil. Egenskapen "display: none" kommer att gömma ett element helt så att det inte tar upp något utrymme i fönstret. Använd detta på element som drop-down menyer eller bilder som tar upp för mycket skärmutrymme. Detta gör att andra delar av din webbplats kan ordna i fönstret som om det dolda elementet aldrig hade varit där. Om du använder denna ändring, se till att all viktig information från det dolda elementet är synligt någon annanstans på din sida.

Omdirigera webbläsaren

När en enhet får tillgång till en webbplats läser den avsnittet av HTML-dokumentet först. Du kan länka till flera CSS-stilark i ett dokuments avsnitt. Om en mobilenhet laddar din webbplats laddar webbläsaren sedan stilarket som identifierats av media = "handheld" -attributet istället för standard stilark. Du kan också omdirigera webbläsaren till olika stilark baserat på skärmstorlek. Detta kan vara användbart om du vill utforma din webbplats på olika sätt för olika mobila enheter. Se Resurser för en lista över vanliga smarta skärmdimensioner.

Alternativ HTML

Om du drastiskt ändrar organisation och layout på din webbplats utöver en ny CSS-fil kanske du vill skapa en ny HTML-fil med önskade ändringar. Om du skapar en annan HTML-fil måste du omdirigera webbläsaren till den nya HTML-filen om användaren tittar på webbplatsen på en smartphone. Förutom att detektera den mobila webbläsaren måste du ändra skriptet för att omdirigera till din alternativa HTML-sida. Se Resurser för en länk till skript för att upptäcka en mobil webbläsare.