Force landscape mode

Hello, I am making the requirement of forced landscape on the mobile terminal. Now I rotate the canvas with CSS, and the style takes effect. But clicking the button will not generate an event, and clicking the original position of the button will produce an effect.

I don’t know why, I have tried camera. UpVector, but it still doesn’t work

Now who can help me solve, or enlighten me, why the button position is still the same after using CSS to rotate canvas? :sob:

You wouldn’t have a PG and/or a link to share? Are you also resizing your advancedDynamicTexture?
Is the button visually in place for your landscape mode but the control remains at origin? Is that what you are saying, can you confirm? Is this iOS only or Safari only or all mobile?

Babylon does not support css transforms at the canvas level for picking.

why not rotating the camera instead of the canvas ? I wonder if this could work.

cc @RaananW who might have other tricks ?

One trick I can think of is to show an overlay on top of the scene when not in the right mode, asking to rotate the device.

You can also force your HTML page to lock the screen in landscape mode using this - ScreenOrientation.lock() - Web APIs | MDN , but TBH - I have never tried using it so I don’t have any experience with that.


Hi, it’s been a long time since I asked you this question. Now I’m going to re-solve the landscape screen problem.

It does not take effect in all mobile devices. After the canvas is rotated, the visual effect has been achieved, but the actual button coordinate position is still at the position before the rotation.

I don’t have PG here because it’s applied to my entire project file.

This question was asked couple of times, and the general answer is, it’s not supported. :smiley: But It seems that some people say that using IFrame and rotating it could help. Didn’t test this myself, but might be worth a try.


As others have mentioned, i believe this effect is best achieved at device level.
E.g. Rotating the device itself, so the OS properly switches what is up/down & left/right.

You can do a check, something like this

If( engine.getRenderHeight() > engine.getRenderWidth() ){
// display an overlay, instructing the user to rotate their device, often a gif of a phone rotating 90 degrees is used in such overlays aswell. 
1 Like

Can you be a bit more precise about this. Is it iOS vs Android? Or is it depending on browser?
Can you make a list of the tested devices working fine and those where you experience the bug?

Given this information, I would say the same as @aWeirdo. It would eventually need to be worked at device level. Also the idea from @nogalo of wrapping everything in an iFrame could be worth exploring and could do the trick. Again, hard to give you just the 'automagical :magic_wand: solution with just the information above.

Edit: And I was just thinking with a delay: Did you use idealWidth and/or idealHeight? Obviously, you would want to switch these when changing orientation.

After a long time I came back, I used IFname to solve the problem of swiveling the screen, thank you very much!