Need help with html portrait on mobile(SOLVED)

Questions
1

Hi. I make a game for web portal.

The game use portrait orientation.
The game can be played on mobile and on pc.

In pc it worked ok. Borders added on edges.

But in mobile it should be rotated to portrait. Or maybe always started as portrait game.

Now in mobile it worked same as desktop. Nothing changed when i changed orientation.

2021-04-18_19-31-03
2021-04-18_19-31-032555Ă—1428 162 KB

How can i rotate it?

Thanks.

2

For Android web you can try some of these. I remember some of them working. It doesn’t work on iOS though I think.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

There is also a CSS method you can do, which I have not tested before but I know about. You detect mobile and then set some CSS to rotate the document. So if the orientation is landscape you would apply transform: rotate(90 deg) on search engines try searching for like “css rotate canvas portrait html5 ios” to find useful articles to give an idea on how to do that.

1 Like
3

Thanks. It was my mistake.
Game corectly work in different orientation by default.

I set album orientation instead of portrait in yandex game console :man_facepalming:

2 Likes
4

This link is good.
If you need show some image when user play in wrong orientation.
https://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/

2 Likes