I have a screen orientation problem on web browser (PC and mobile):
I want my game to be playable only in portrait mode. Is it possible to force and lock the portrait mode by using only TypeScript code?
Moreover, I have 2 cases where the screen orientation makes problems:
When I start my game in portrait mode, then I rotate my screen to play in landscape mode, my game is cut and I can’t see the whole canvas of the game (screen 1).
When I start in landscape mode then rotate into portrait mode, the canvas of my game becomes really small (screen 2).
Ensure your 3D canvas’ parent container stretches full height and width of the browser window - there’s a number of ways of doing that with CSS grid or flex or just old-school div with width: 100%; height: 100%; margin: 0; padding: 0;. But see note below about viewport height differences on mobile.
Ensure that the child 3D canvas is resized to match the window/parent container size i.e. apply same above parent styles to child 3D canvas
Ensure 3D engine is resized if/when window size/aspect changes window.addEventListener('resize', () => this.engine.resize());
You need to lock the rendering orientation to the mobile orientation - I don’t know if this is possible in a mobile web browser. I don’t think it is, but maybe someone else can comment on this. What I have done in the past though is use a CSS orientation media query i.e. @media (orientation: portrait) {} to hide/show an information overlay that reminds the user to rotate their device to the desired orientation. Maybe you could also try using CSS transform: rotate(90deg); but I suspect that won’t produce the desired results in terms of mapping pointer/touch inputs to scene picking.
Note: When running in a mobile web browser, different platforms (Android vs iOS) compute available window heights in different ways, as they make allowance for other mobile OS elements like navbars etc. It’s a more complex topic you’ll need to Google, but generally you can use vh units and dynamically compute a custom CSS variable e.g. --viewport-height
In the resize event (after the this.engine.resize();, I had to resize my canvas game to take into consideration the new height/width values depending on the screen window size (the same width/height values as when I created my canvas).
Maybe I’m misunderstanding, but are you saying you’re setting the canvas size inside the ‘resize’ event handler? If so, that runs the risk of the handler being called continuously. Ideally canvas size should be set with CSS.
