My objective is to reposition a container everytime the device's orientation changes. It should be so simple to detect the correct orientation but in reality it isn't because the orientation can be different depending of the device.
Any simple ideas without having to validate the device's OS with JavaScript?
Here's a simple example:
<html>
<head>
<title>Orientation Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
window.addEventListener( 'orientationchange', repositionMenu, false );
function isPortrait() {
return deviceOrientation() === 0 ? true : false;
}
function isLandscape() {
return deviceOrientation() !== 0 ? true : false;
}
function detectOrientation() {
return isPortrait() ? 'portrait' : 'landscape';
}
function deviceOrientation() {
return window.orientation / 180;
}
function repositionMenu( e ) {
alert( 'orientation: ' + detectOrientation() + '\nangle: ' + window.orientation );
};
</script>
</head>
<body>
<h1>Orientation Test</h1>
</body>
</html>
Thanks in advance!
