jackysee · June 13, 2018 10:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Device Orientation by DeviceMotionEvent</title>
    <style>
        body{ margin:0; padding:0; font-family: sans-serif;}
        .main{
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        button{
            font-size: 2rem;
            padding: 1rem;
            margin: 1rem;
        }
        .content{
            display: none;
            text-align: center;
            max-width: 60vw;
        }
        .fullscreen #go{display: none;}
        .fullscreen .content{ display: block; }

        .icons{
            font-size: 4rem;
            display: flex;
            justify-content: center;
        }
        .icon{
            transition: all .3s ease;
        }
        [data-orientation=portrait-secondary] .icon{
            transform: rotate(-180deg);
        }
        [data-orientation=landscape-primary] .icon{
            transform: rotate(-90deg);
        }
        [data-orientation=landscape-secondary] .icon{
            transform: rotate(90deg);
        }
    </style>
 </head>
 <body>

    <div class="main">
        <button id="go">Go Full Screen</button>
        <div class="content">
            <p>Text should be locked to portrait (primary) but icons below would rotate according to the derived orientation by DeviceMotionEvent.</p>
            <div class="icons">
                <div class="icon">😃</div>
                <div class="icon">😎</div>
                <div class="icon">🤗</div>
            </div>
            <button id="exit">Exit Full Screen</button>
        </div>
    </div>

    <script>
        const main = document.querySelector('.main');
        const go = document.querySelector('#go');
        const exit = document.querySelector('#exit');

        const requestFullScreen = () => {
            document.documentElement.webkitRequestFullScreen();
        };
        const exitFullScreen = () => {
            document.webkitExitFullscreen();
        }

        go.addEventListener('click', requestFullScreen);
        exit.addEventListener('click', exitFullScreen);

        document.onwebkitfullscreenchange = ev => {
            if(document.fullScreen || document.webkitIsFullScreen){
                main.classList.add('fullscreen');
                try{
                    screen.orientation.lock('portrait-primary');
                }
                catch(e){
                    console.error('lock screen not supported');
                }
            }
            else{
                main.classList.remove('fullscreen');
            }
        };

        let orientation;
        window.addEventListener('devicemotion', e => {
            const x = -e.accelerationIncludingGravity.x;
            const y = -e.accelerationIncludingGravity.y;
            const z = -e.accelerationIncludingGravity.z;
            const magnitude = x * x + y * y;
            let newRotationDeg;
            if (magnitude * 4 > z * z) {
                const ONE_EIGHTY_OVER_PI = 57.29577957855;
                const angle = Math.atan2(-y, x) * ONE_EIGHTY_OVER_PI;
                newRotationDeg = 90 - Math.round(angle);
                // normalize to 0 - 359 range
                while (newRotationDeg >= 360) {
                    newRotationDeg -= 360;
                }
                while (newRotationDeg < 0) {
                    newRotationDeg += 360;
                }
            }
            let newOrientation;
            if (newRotationDeg >= 46 && newRotationDeg <= 135) {
                newOrientation = 'landscape-primary';
            } else if (newRotationDeg >= 136 && newRotationDeg <= 225) {
                newOrientation = 'portrait-secondary';
            } else if (newRotationDeg >= 226 && newRotationDeg <= 315) {
                newOrientation = 'landscape-secondary';
            } else {
                newOrientation = 'portrait-primary';
            }
            if(orientation !== newOrientation){
                main.setAttribute('data-orientation', newOrientation);
                orientation = newOrientation;
            }
        });


    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
	<title>Device Orientation by DeviceMotionEvent</title>
	<style>
	body{ margin:0; padding:0; font-family: sans-serif;}
	.main{
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	}
	button{
	font-size: 2rem;
	padding: 1rem;
	margin: 1rem;
	}
	.content{
	display: none;
	text-align: center;
	max-width: 60vw;
	}
	.fullscreen #go{display: none;}
	.fullscreen .content{ display: block; }

	.icons{
	font-size: 4rem;
	display: flex;
	justify-content: center;
	}
	.icon{
	transition: all .3s ease;
	}
	[data-orientation=portrait-secondary] .icon{
	transform: rotate(-180deg);
	}
	[data-orientation=landscape-primary] .icon{
	transform: rotate(-90deg);
	}
	[data-orientation=landscape-secondary] .icon{
	transform: rotate(90deg);
	}
	</style>
	</head>
	<body>

	<div class="main">
	<button id="go">Go Full Screen</button>
	<div class="content">
	<p>Text should be locked to portrait (primary) but icons below would rotate according to the derived orientation by DeviceMotionEvent.</p>
	<div class="icons">
	<div class="icon">😃</div>
	<div class="icon">😎</div>
	<div class="icon">🤗</div>
	</div>
	<button id="exit">Exit Full Screen</button>
	</div>
	</div>

	<script>
	const main = document.querySelector('.main');
	const go = document.querySelector('#go');
	const exit = document.querySelector('#exit');

	const requestFullScreen = () => {
	document.documentElement.webkitRequestFullScreen();
	};
	const exitFullScreen = () => {
	document.webkitExitFullscreen();
	}

	go.addEventListener('click', requestFullScreen);
	exit.addEventListener('click', exitFullScreen);

	document.onwebkitfullscreenchange = ev => {
	if(document.fullScreen \|\| document.webkitIsFullScreen){
	main.classList.add('fullscreen');
	try{
	screen.orientation.lock('portrait-primary');
	}
	catch(e){
	console.error('lock screen not supported');
	}
	}
	else{
	main.classList.remove('fullscreen');
	}
	};

	let orientation;
	window.addEventListener('devicemotion', e => {
	const x = -e.accelerationIncludingGravity.x;
	const y = -e.accelerationIncludingGravity.y;
	const z = -e.accelerationIncludingGravity.z;
	const magnitude = x * x + y * y;
	let newRotationDeg;
	if (magnitude * 4 > z * z) {
	const ONE_EIGHTY_OVER_PI = 57.29577957855;
	const angle = Math.atan2(-y, x) * ONE_EIGHTY_OVER_PI;
	newRotationDeg = 90 - Math.round(angle);
	// normalize to 0 - 359 range
	while (newRotationDeg >= 360) {
	newRotationDeg -= 360;
	}
	while (newRotationDeg < 0) {
	newRotationDeg += 360;
	}
	}
	let newOrientation;
	if (newRotationDeg >= 46 && newRotationDeg <= 135) {
	newOrientation = 'landscape-primary';
	} else if (newRotationDeg >= 136 && newRotationDeg <= 225) {
	newOrientation = 'portrait-secondary';
	} else if (newRotationDeg >= 226 && newRotationDeg <= 315) {
	newOrientation = 'landscape-secondary';
	} else {
	newOrientation = 'portrait-primary';
	}
	if(orientation !== newOrientation){
	main.setAttribute('data-orientation', newOrientation);
	orientation = newOrientation;
	}
	});


	</script>

	</body>
	</html>