4
I have a website that would like to lock in its position on screen when accessed from a mobile device, preventing it to rotate or rotate together with the mobile.
Is there any Javascript code that does this? Block the rotation of the screen as if it were an application?
2
The colors are just for you to have an idea. That didn’t sound 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>
Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
It seems that the API that would allow this is still experimental and unsupported. See http://stackoverflow.com/questions/5298467/prevent-orientation-change-in-ios-safari (in English) for a possible alternative. See also https://gist.github.com/visnup/2605440 (looks like a simpler solution).
– bfavaretto
Unfortunately, with the web technology we have, this is not yet possible, because it is not controlled by the site in question, but rather 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, should it occur.
– Marcelo Camargo
This is possible yes. Log in to http://www.mcdonalds.com.br/favoritos and see that you can only use horizontally
– Igor Martins
Why don’t you use something like calculating resolution? Many smartphones use 480 x 854 pixels. You can, for example, if the resolution is less than 500 px, display a message to rotate the screen.
– Igor Martins
Hi bfavaretto, thanks for your help. I was testing the codes you passed and they don’t work for Landscape orientation, which is what I really needed... I tried it in the simplest: @media (orientation: Landscape) { body { -Webkit-Transform: Rotate(-90deg); -Moz-Transform: Rotate(-90deg); -o-Transform: Rotate(-90deg); -ms-Transform: Rotate(-90deg); form: Rotate(-90deg); } } But it didn’t work...
– user8864