Game doesn't always resize correctly

[FormularSumo]

This can involve any of the following:

• Game either doesn't fill the available screen space (in both dimensions) or is partially/entirely rendered off-screen
• Game is stretched vertically or horizontally when resizing
• Game doesn't resize whatsoever (eg when rotated)

It seems to be mostly an issue on mobile rather than desktop, and mainly on Android browsers - more details below. And the Android issues seem to be mostly reproducible on the Chrome desktop mobile emulator, but not on the Firefox one - also see below.

Possible last-resort ideas to help fix

• Lock the game to be always horizontal
• Lock the game resolution in Love2D to be always 1920*1080p, handling aspects ratios/padding entirely in CSS
• Lock canvas to always be 1920*1080p and wrap in resizable div

There's also an issue with touch targets (for any input method) not always being correct, but I think that's dependent on this issue

[FormularSumo]

Initial testing results (2024-01-14)

• In order to change the actual canvas size, rather than the css size (which just stretches it), you need to use the canvas height and width property, which is not in style but a separate tag.
• screen.orientation.addEventListener("changed") is called just before a screen has rotated not afterwards, so accessing window.innerWidth for example gets the wrong value
• Changing the canvas size using window.addEventListener("resize") works, but changing the canvas does not always cause love2d to correctly resize.
• When I print the size in love2d, it does not change resolution on desktop until the program has entered and left fullscreen, then resizing does change the resolution. Chrome and Firefox have slightly different behaviour around entering and exiting fullscreen but it's a minor difference.
• Meanwhile on mobile Chrome and Firefox are the same, both also only resize after fullscreen has been toggled, with identical behaviour. However when they are fullscreen, rotating does not cause them to resize properly. On Safari mobile though resizing and reorientating actually works fine always (there's no fullscreen toggle as this isn't supported on Safari). This was all tested both in browser and in web apps

[FormularSumo]

Returning to resizing shenanigans (2024-09-10)

Using mostly default Love.js (pre https://github.com/FormularSumo/Star-Wars-Galaxy-Collection-Web/commit/c9fcd71bc32658ec2589fc61ac2466c6a558d1d8) game doesn't really resize on mobile except sometimes when you enter/exit fullscreen. On the plus side it's never rendered off-screen or stretched. (Check this)

Using this solution: https://github.com/Davidobot/love.js/issues/16 in the Chrome mobile device emulator, until I click on it, the game is always filling the screen, but (CSS) stretching instead of resizing correctly. After I click it doesn't resize at all. And after entering or fullscreen, it works perfectly... On Chrome and Firefox Android it's the same, except you need to exit (as opposed to just enter) fullscreen for to work perfectly. On Safari iOS it works pretty much perfectly. Update: testing on iOS 18 beta with fullscreen API - it doesn't resize when rotating, much like Chrome and Firefox on Android :/ On Firefox desktop/emulator it's same as Chrome except no resizing at all instead of stretching before clicking on the game

If I then add the resizeCanvas function/listener, it causes the game to seemingly never resize (Chrome emulator)...

Using https://github.com/Davidobot/love.js/issues/50#issuecomment-2338513304 doesn't change behaviour except for when in fullscreen, then it stretches instead of resizing on Chrome emulator. Might retest later if I can fix initial resizing not working.