Tutorials

Orientatie van mobieltjes

Door Johan Dam -20-08-2010 14:19 -13.432 views

Elke moderne mobiel kan je tegenwoordig op zijn kant leggen waarbij de pagina ook kantelt zodat het weer recht staat. Op dat moment heeft de pagina meer breedte en minder hoogte. Wat nu als je hier gebruik van wilt maken? Dat 2 elementen onder elkaar staan in 'portret' maar naast elkaar bij 'landscape', hoe doe je dat? Je kan de @media in css gebruiken, maar die word niet overal ondersteund dus ja, wat dan? Javascript.

Pagina 1

orientatie.js


var orientation;

// niet alle mobiele browsers ondersteunen de 'orientationchange' dus we gebruiken 'resize' als fallback
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, setOrientation, false);
window.addEventListener("load", setOrientation, false);

function setOrientation(){
	orientation = (screen.width > screen.height) ? "landscape" : "portret";
	
	// hieronder doen wat je wilt afhangend van de orientatie
	if(orientation == "portret"){
		// 2 elementen onder elkaar;
		document.getElementById('element_1').style.cssFloat = "none";
		document.getElementById('element_2').style.cssFloat = "none";
	} else {
		// 2 elementen naast elkaar;
		document.getElementById('element_1').style.cssFloat = "left";
		document.getElementById('element_2').style.cssFloat = "left";
	}
}