Device orientation on the browser
To detect the orientation of devices where the web browser is running, using Javascript, we rely on the
window.addEventListener("deviceorientation") that listens to the orientation of the device.
Example
See it running in: http://publicationstation.wdka.hro.nl/D&T/orientation/
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
<title>Device orientation</title>
<style type="text/css">
.h5logo {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div role="main" class="container">
<h1>Device Orientation</h1>
<p>example from <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html">http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html</a></p>
<p>
Device orientation is <b><span id="doeSupported">not</span></b> supported
on your device.
</p>
<img id="h5logo" src="http://publicationstation.wdka.hro.nl/wiki/images/8/85/Guttenberg.jpg" class="h5logo">
<h2>Rotation Data</h2>
<p>
<b>alpha:</b> <span id="alpha"></span><br>
<b>beta:</b> <span id="beta"></span><br>
<b>gamma:</b> <span id="gamma"></span><br>
</p>
<p>
<b>Last updated:</b> <span id="timestamp"></span>
</p>
</div>
<script type="text/javascript">
var fixed = 2;
var h5logo = $("#h5logo");
var timestamp = $("#timestamp");
var alpha = $("#alpha");
var beta = $("#beta");
var gamma = $("#gamma");
/* // [START devori] */
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
$("#doeSupported").innerText = "";
}
/* // [END devori] */
var deviceOrientationData;
function deviceOrientationHandler(evt) {
deviceOrientationData = evt;
try {
timestamp.text( new Date(evt.timeStamp));
alpha.text( evt.alpha.toFixed(fixed) );
beta.text( evt.beta.toFixed(fixed) );
gamma.text( evt.gamma.toFixed(fixed) );
var rotation = "rotate("+ evt.alpha +"deg) rotate3d(1,0,0, "+ (evt.gamma * -1)+"deg)";
h5logo.css('transform', rotation).css('webkitTransform', rotation);
} catch (ex) {
$("EdoeSupported").text("NOT");
}
}
</script>
</body>
</html>
Emulate device orientation
On a desktop computer the device orientation can be emulated by the browser.
In Chrome sensors can be simulated by:
- Opening the DevTools main menu, then
- Under More Tools, clicking on Sensors
https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/navigate-to-sensors.png
More info at: https://developers.google.com/web/tools/chrome-devtools/device-mode/device-input-and-sensors
more on Device orientation/motion
https://mobiforge.com/design-development/html5-mobile-web-device-orientation-events
https://www.w3.org/TR/orientation-event/
https://www.html5rocks.com/en/tutorials/device/orientation/
