Force Page Orientation?

Is there a way to force the orientation of a web page in a Xojo web app? So if the user is on an iPhone or iPad and they rotate the device, I don’t want the page to rotate. Or if I want the page to have a landscape orientation, I force that regardless of the orientation of the device.

Is there a way to do this easily?

There’s no way to fix the orientation in a browser. You could however, show a page that says Landscape Mode Unsupported using the OrientationChanged event.

OK. I didn’t think so. Bummer. I guess one could get creative and rotate the controls 90 degrees when in the “wrong” orientation. But maybe that won’t work either. Can you place a button rotated 90 degrees? Maybe not…

Normal controls do not rotate. But you could use pictures in canvas :wink:

Wonder which users would still use the app, though. Maybe people who read laying down ?

And they CAN lock the orientation of their device.

For what it’s worth, CSS could rotate the whole page and the controls, but the width/height would still be wrong.

The only way I can think of to ‘force’ the user to rotate their device in Landscape mode is to fake the ratio of your WebPage/Content in Portrait Mode.

So the user would see ‘black bands’ above and under the central part of your page in Portrait mode. The user would then implicitly rotate the device (exactly as when watching a Movie in Portrait mode) to Landscape mode. Users are used to do that for Movies/TVSeries.

Once rotated then you display the all page with full width & height.

I did a little research and there’s a proposal around for a LockRotation property for browsers. It’s not available on enough browsers yet, but the they are thinking about this problem.