Force “landscape” orientation mode

Help & Support
1

Hi

I was trying to force landscape mode on playcanvas game for mobile , using JS API
“screen.orientation.lock(“landscape”);” , using google chrome on Android , but it’s not working
Please , can someone show me code example for this ?

1 Like
2

By the sounds of things, if the app is not full screen, it doesn’t work.

3

It was useful , thank you yaustar!

For some reason ,it’s not possible to enter full screen , together with landscape mode through initialize function , only when i fire event from button, if someone can help me , this is my code

image
image743×584 30.3 KB

4

Are you testing this on iOS or Android?

5

Android , google chrome and default browser

6

Can you provide a sample project of the issue please?

7

Unfortunately it’s private project for company i am working for.
But it’s simple , full screen is working , if i call function “pritisno” from button event.
But if i call that function through initialize function (start function) , full screen is not working

8

Ah, that makes sense. Full screen is most likely needed to be done from user input such as a button event or the user clicking/tapping the screen.

9

Just an additional thought, as I had a similar issue recently.
My solution was to create a blocking div containing a text, recommanding / forcing the wide screen.
I then used a simple css media query to show / hide the div based on device orientation.
Similar to that:

#orientationInfo {
     transition:opacity 1s;
     pointer-events: none;
}

@media (orientation: landscape) {
  #orientationInfo {
    opacity:0;
  }
}

@media (orientation: portrait) {
  #orientationInfo {
    opacity:1;
  }
}
1 Like
10

Hello,
I am also looking for Force “landscape” orientation mode…

And what if user disabled orientation mode in device then user will never able to view game landscape orientation… How to fix this?

Is there any way to force landscape yet?

11

Hi @Ketan_ATA,

From my experience you can’t effectively force landscape in a webpage. What I usually do is what @Rechi instructed as well: automatically show a blocking modal when the wrong orientation mode is active, forcing the user to rotate his device to continue using the app.

12

Hello @Leonidas Thanks for the reply :slight_smile:

I try that way also…
Shows overlay when portrait mode.
image

I know it works fine in chrome as we change device orientation…

But now problem is this playcanvas game is launching in another Android app. And here the problem comes… there is no rotation… and so Overlay remains on screen forever… and so no gameplay… :frowning:

13

Not much you can do about that unfortunately as the app is handling the rotation. Is there an API with the API to request landscape in the app?

1 Like
14

I have to confirm about this…

I try css way as well using transform: rotate(90deg)…
But it generates wrong clicks…

EDIT:

@yaustar

According to them app orientation is always in portrait and there is no API to handle this.

[You can create simulation of it by disabling auto rotation on device then check browser. The game will stuck on portrait mode… There is no way you can turn it in landscape mode.]

So how am i supposed to handle this?

15

Hello brother, how does your above code solve the problem that the initialization cannot be full screen

16

It’s only possible from input, there is no other way, except using some CSS tricks, which can be annoying from my perspective

17

what about using the function in postInitialize function instead of initialize? doesn’t it solve your problems?

18

No, the API for full screen still requires user input.

19
  • How to display images in full screen on an Apple device
20

Full screen API is not available on iOS Full Screen API | Can I use... Support tables for HTML5, CSS3, etc