In Unity, look at Project Settings - Player - Resolution and Presentation - Set your default width and height there.
This game: https://evolutionarygames.itch.io/pattern-puzzles
I have the default resolution set to 450 x 800. The canvasses are created 550 x 800.
On itch.io my settings are: Embed in Page - Manually set size to 450 x 800 with orientation Portrait. I've disabled go full screen (don't tick the box), because then the game is cut-off.
I've disabled go full screen
I hate you.
But seriously, why? Just whyyyy? :'-( There are very, very, very few games that benefit from this. Your's aint such a game. It is non fun to scroll down and up or resize browser window to actually see your game in full. I cannot turn my display in portrait mode. (Ok, sure, I could, with the graphics diver and turn my neck 90 degree, since I am talking about a computer screen)
Since basically all the unity games out there do handle this in the expeced manner, I guess you and op are missing something trivial and overdo something that should be handled by Unity automatically.
The game in window mode fits on my monitor which is standard 1920x1080 without scrolling. On itch.io you need to scroll past my banner once, on my own website, there's no scrolling needed but I've also disabled full screen. On the longest side it is 800 which fits well into a height of 1080.
I designed the game to be played on mobile devices (it's published on Huawei App Gallery and at Amazon). That's why I have an odd portrait resolution (450 x 800). If I was designing it for PC I would've used different dimensions.
I suppose the other developers are creating their browser games using resolutions more suited to desktops that can resize based on desktop dimensions.
We can program the cameras to fit black bars and force a resolution when necessary. I didn't in this case, because the game was okay on all my test devices.
Your game does not even fit in my browser when I set my browser zoom to 100% and put the browser itself in fullscreen to hide the tabs and clutter. Let me guess. Your windows desktop zoom is set to 100% or 125%.
You should never count pixels of actual display, because you never work on actual pixels, except when getting direct access to the screen. It is always scaled. My screen could handle about 2000 pixel in height. Yet my browser would tell your game, should it ask, that is has window.screen.height = 720 and this is not even factoring in the zoom level of the browser. And I double checked. This is the recommended setting of windows display setting.
Issues like this are usually dealt with by clicking the fullscreen button. No scrolling to the exact point that it fully fills the screen, no accidental offscrolling, no wasted pixels, also no clutter like tabs and status bars.
So as a player naturally I would expect those game engines to be super developer friendly for basic stuff like that. Guess this is not so.
What you need is an aspect ratio and an idea how big the user interface elements have to be to be of use, in relation to the full display size. Also I randomly picked a 5 year old huawe spec, a p30 has this resolution: 1080 x 2340 pixels, 19.5:9 ratio. You have over 2000 pixels on that device in height. Guess you are working on a viewport there too.
Thanks for the feedback. I've enabled full screen mode on itch.io. (Itch.io's full screen, not Unity's).
There is no text on the bottom when you play the game. Only the start screen has the instructions, and below the instructions a banner ad, showcasing my other games. (If the instructions are cut-off, the game would be unplayable, because you wouldn't see the bottom rows of tiles.)
I've enabled full screen mode on itch.io. (Itch.io's full screen, not Unity's).
Does not work. The "fullscreen" is not fullscreen. Oh, the browser goes fullscreen and it is different than regular fullscreen with F11.
But try pressing ctrl + and - . The browser zoom setting still get's applied. Anyone not browsing with 100% zoom will not see the game in fullscreen.
I randomly tried a few other games that are Unity and web. Some work, some do not even have a fullscreen button. There even seems to be an issue with staying "fullscreen", but rendering the game to a lower resolution. The Unity fullscreen button seemed to be the most reliable.
It is a shame that developers have to do this manually and is not handled in a plug&play fashion easy to implement. And a shame it is, because resizing screen resolution is old, not new. With crt displays this was common. The whole display would be analogous set to a new hardware resolution. You could never be sure what the pixel resolution would be. One would excpect time tested solutions to this kind of problems.
I believe Unity has done an overhaul of their web browser backend in their latest beta version. Perhaps this is an issue they addressed.
I prefer to use Clickteam Fusion for web games - but with this particular game I encountered a bug in Fusion, so rewrote it in Unity (it was quicker than rewriting it in Fusion to overcome the bug). All my other browser games are written in Clickteam Fusion.
What reason would your default resolution be different than your canvasses?
As a web developer, screen resolutions were so easy to work with. But as a game developer, I hate it lol. As far as I know, fluid layouts such as 100% screen width isn't even a thing. Trying to figure out sizes that scale with every device is not easy, especially since not every device will be your reference resolution or default resolution.
To give the canvas more space to scale on different sizes like 600 x 800. I have it at 550 x 800 with the setting match 80% of the height.
You can program the camera to adjust itself when necessary. Test the screen width and height and if it's too far from your target, it can change the projection size (orthographic) etc. Just do a search on setting the camera size in Unity. There are multiple options.
Wouldn't it be nice if mobile screens all had the same resolution?!
