I am currently developing a web-based game that can be played on both desktop computers and mobile devices. However, for the optimal experience on mobile devices, players need to rotate their device to landscape mode.
To prompt users to rotate their device, I implemented a simple check based on the width and height of the screen. Initially, I added an image instructing the user to rotate the device in the HTML file:
<div id="rotateWarning"><img src="res/plsRotate.png" style="width: 100%; height: auto;"></div>The issue with this approach is that the image is displayed by default, which requires users to unnecessarily rotate their phone from portrait to landscape and back. Additionally, it also shows on desktop browsers where rotation is not applicable. Although the code hides the image when the device is correctly oriented, it's not an ideal solution.
One alternative could be setting the image to display: none by default, but this poses another problem as the image will never be visible even when needed. It seems that once set to display: none, changing its visibility becomes challenging.
Is there a way to address this issue effectively? Are there better methods or approaches to implement this feature?
Edit:
Here is a snippet of my HTML file:
<script>
window.addEventListener('resize', onSizeChange);
</script>And here is the function I created:
function onSizeChange() {
if (getMobileOperatingSystem) {
if (window.outerHeight > window.outerWidth) {
document.getElementById('rotateWarning').style.display = 'block';
document.getElementById('logInPages').style.display = 'none';
} else {
console.log("Landscape!");
document.getElementById('rotateWarning').style.display = 'none';
document.getElementById('logInPages').style.display = 'block';
}
}
}