Så växlar du mellan desktop- och mobil med responsive webdesign

21 Aug 2011 Övrigt

Jag har tidigare skrivit lite om responsive webdesign på bloggen(här och här) och höll en session på SSWC för ett tag sedan. En nyttig session med mycket bra input från flera av deltagarna. Vi hade bland annat et mycket intressant samtal om mobilversioner överhuvudtaget och hur irriterande det är när en mobilversion av en webbplats inte innehåller all den funktionalitet som finns i desktop-versionen. Frågan som ställdes var om det i vissa fall inte är bättre att skippa en mobilanpassad version och bara låta besökarna se den ordinarie versionen av sajten.

Detta har fått mig att tänka på hur man enklast sköter växling mellan desktopversoinen(med full funktionalitet) och en ev. begränsad mobilversion i responseive webdesign(och media queries). Det vanliga angreppssättet att växla mellan versioner av webbplatsen är att lösa detta med cookies som skickar information till servern om vad användaren valt. Efter en stunds funderande slår det mig att också detta moment blir enklare i en responsive-approach. Så pass att också går att lösa med…CSS helt utan php-kod.

Eftersom media queries bara väljer css kan man i responsive webdesign sköta detta helt och hållet på klientsidan. Genom att lägga in två st knappar på sidan. En för mobilversionen och en för desktopversionen kan man helt enkelt dölja eller visa dessa beroende på vilken CSS-som visas. Ett tryck på denn knapp gör sedan två saker.

1. Sätter en cookie via javascript som håller reda vilken version man vill visa.
2. Aktiverar ett javascript som tömmer eller lägger till css beroende på vilken version som är vald.

Återigen förbluffande enkelt. Knapparna jag lägger in har följande kod.

<a id="normalLink" href="javascript:removejscssfile('style_iphone.css', 'css')">visa hela sajten</a>
<a id="mobileLink" href="javascript:applycssfile('style_iphone.css', 'mobileStyle')">visa mobil version</a>

I css för mobil-sajten har #normalLink ”display: inline” och #mobileLink ”display:none”. När css-filerna switchas så växlas bara dessa värden och den knapp som nyss visades döljs och vice versa.

För att slippa ladda om sidan använder jag mig av följande javascript-metod för att rensa bort css-kod som lagts till av media queries-frågan. Det funkar helt smärtfritt i de tester jag gjort.

function removejscssfile(filename, filetype) {
	var targetelement = "link";
	var targetattr = "href";
	var allsuspects=document.getElementsByTagName(targetelement)

	for (var i=allsuspects.length; i>=0; i--) {
		if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) {
		   allsuspects[i].parentNode.removeChild(allsuspects[i])
		}
	}
}

I de fall jag behöver lägga till en inte inladdad css använder jag istället denna metod.

function applycssfile(filename) {
	$('head').append('<link rel="stylesheet" href="'+filename+'" type="text/css" />');
}