I have a website that would like to lock your position on the screen when accessed from a mobile device, preventing it from roaming or rotating along with the mobile.
Is there any JavaScript code that does this? Block screen rotation as if it were an application?
The colors are just for you to get an idea. That did not look very good, at least on my Moto X (Chrome, Android 4.4).
<html>
<head>
<meta charset='utf-8' />
<title>Teste de orientação no mobile</title>
<style>
#wrapper { width: 400px; height: 400px; }
#wrapper.paisagem { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); background-color: lightgreen; }
#wrapper.retrato { background-color: lightblue; }
</style>
<script>
window.addEventListener('orientationchange', function(){ // funciona com addEventListener('resize', ...) também!
if(window.innerHeight > window.innerWidth) document.getElementById('wrapper').className = 'retrato';
else document.getElementById('wrapper').className = 'paisagem';
});
window.addEventListener('load', function(){
document.getElementById('wrapper').className = 'retrato';
});
</script>
</head>
<body>
<div id='wrapper'>
<h2>Teste de orientação no mobile</h2>
<p>
Gire para ver.
</p>
</div>
</body>
</html>
Unfortunately, with the web technology we have, this is still not possible, because it is not controlled by the site in question, but by the settings of the device and the site does not have the power to interfere in it as if it were an application. That would be a security breach if it happened.