Is there a way to detect if the user has flipped their phone or device?

Help & Support
1

The positions of my touch screen controls are only determined at the start of the scene. A post on my dev blog pointed out a flaw with this: if someone plays one way, then rotates during the game, the touch areas are now wrong.

I’m considering a work around by using “buttons” (invisible, or transparent at least, of course) positioned by the sprite interface, and thus anchored to the edges. I was planning on changing the jump controls eventually, so it’s not much more effort to fix this too. This should solve my control issue, and is totally doable with a bit of extra work.

But the situation leaves me with an unanswered question.

Is there a reliable way for browser games like playcanvas to “check” for the rotation of the screen on a device?

(It would have to be rotation, not just a change of resolution, because I think a few devices out there are square. Though those devices might be rare enough where it’s not worth supporting, or I might be imagining them.)

The game rendering changes size when the device is flipped. Though I suspect that is more due to the canvas being set up to “stretch” instead of actually checking the position because on PC it also will fill the window as the browser changes size.

Anyway, mostly just curious if this even exists. I’ve never seen a browser website care what orientation the device is in, so maybe the browsers simply don’t have a way to check?

2 
// On orientation change
window.addEventListener("orientationchange", calculateDimensions, false);
// On resize
window.addEventListener("resize", calculateDimensions, false);

function calculateDimensions(){
	var w = window.innerWidth;
	var h = window.innerHeight;
	console.log(w + " : " + h);

	if(w > h){
		// Landscape
	}
	else if (w === h){
		// Square
	}
	else{
		// Portrait
	}
}

Desktops don’t fire the orientationchange event, and some mobile devices don’t fire the resize event when rotated, so it’s always better to check for both.

3

On mobiles there are extra problems where window.innerWidth/Height is not changed before triggering orientationChange, which leads to some complications.
It is “healable” by having element in scene that is “fullscreen” stretched in absolute space, and query its bounding client rect, that triggers force-reflow of that element in screen space and it provides reliable source of “right now” resolution of screen.