Menu
I am trying to disable phone rotation affecting the web page of one of my HTML5 mobile apps. No reorganizing of the layout, resizing, orientationchange behavior.
I want it so that you rotate the phone and the initial layout loaded will stay the same, forcing the user into using the app in the original orientation. There are many subtleties to user logic and I truly feel this is needed in my app, so please no comments on that choice, rather help for my question in the first sentence.
I tried listening for BOTH 'orientationchange' and 'resize' events and calling preventDefault and stopPropagation on them, to prevent any browser behavior of reorganizing the page to fit a landscape view when turned. Well, obviously preventing ANYTHING (ideally).
window.addEventListener("orientationchange", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
window.addEventListener("resize", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
Made absolutely no difference. Browser still reorganized the page on Android (both pre2.1 and after) and iPhone 4-5.
tried meta tags
<meta name="viewport" content="initial-scale=1.0, user-scalable=no />
then got pissed, tried
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
neither made a difference.
looked furiously on StackOverflow, saw what I did in step 1. put out there several times...tried again to make sure I wasn't messing something up. Didn't work.
sucked in my pride, then decided to keep running into a brick wall due to pride, then really sucked in my pride and posted here.
HALP.
239
The obvious solution is to use javaScript for this:
if(window.innerHeight > window.innerWidth){
document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}
When the screen rotates, rotate it right back.
163
Keep it short and simple! :]
window.addEventListener('orientationchange', function ()
{
if (window.innerHeight > window.innerWidth)
{
document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)";
}
});I did it using the following work around, which asks user to switch back to Portrait mode.
Once the user switch back to Portrait mode, he will be allowed to interact with application.
<head>
<style type="text/css">
#landscape{
position: absolute;
top: 0px;
left: 0px;
background: #000000;
width: 100%;
height: 100%;
display: none;
z-index: 20000;
opacity: 0.9;
margin:0 auto;
}
#landscape div{
color: #FFFFFF;
opacity: 1;
top: 50%;
position: absolute;
text-align: center;
display: inline-block;
width: 100%;
}
</style>
<script>
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
document.getElementById("landscape").style.display="block";
break;
case 90:
document.getElementById("landscape").style.display="block";
break;
default:
document.getElementById("landscape").style.display="none";
break;
}
}
//Listen to orientation change
window.addEventListener('orientationchange', doOnOrientationChange);
</script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
