Hi everyone.
I am trying to lock browser orientation for webgl game to run it on landscape mode.
In order to lock the orientation on mobile browsers (Chrome, Opera) I need to enter in fullscreen mode.
In index.html file I have made a button for entering the fullscreen mode, and then changing orientation to landscape.
Here’s how it is done.
<script type="text/javascript">
var changeScreenOrientation = function()
{
var elem = document.getElementById('gameContainer');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
screen.orientation.lock('landscape');
}
</script>
<input type="button" onclick="changeScreenOrientation()" value="Change Screen Orientation" size="100" />
The problem is when I enter in fullscreen mode and lock the orientation, here’s what happens.
As you can see, the game content size is changed and doesn’t fit in the screen.
And here’s how it should look like.
Any ideas how to fix this issue?