Unity WebGL build, how to set canvas size for mobile browsers?

Question

I have an android smartphone with a FullHD screen (1920*1080). And I am building a game with Default Canvas settings: 1280*720. And in my html template I've set canvas size:

<div id="gameContainer" style="width: 1280px; height: 720px; margin: auto"></div>

But when I run the game in landscape orientation on my smartphone, it can't fit to the screen, it is too big! Why? It supposed to be smaller then 1080p browser screen. Also, in portrait mode everything is fine and game's window is scaled properly to fit the screen.

I've tried to use meta viewport tag. With it I've managed to fit the canvas to the screen, but it had broken everything else.

Unity version is 2018.2.7. Mobile browser is Chrome for Android.

ChoopTwisk · Accepted Answer · 2019-10-14 18:56:16Z

1

You can edit your gameContainer div to fill the tab, so it is full in whatever resolution, even when resolution changes:

<div id="gameContainer" style="padding: 0px; position: absolute; height:100vh; width:100vw;"></div>

answered Oct 14, 2019 at 18:56

ChoopTwisk

1,3318 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Organ Over a year ago

Thanks. Now, my gameContainer and #canvas elements are somehow scaled to the mobile screen size in landscape orientation. I can play in lanscape.

Dan Organ Over a year ago

But it is not fulling in when I am running the game in portrait orientation. In landscape mode it is trying to fit screen width, but in portrait - screen height, so, only the center is visible.

Collectives™ on Stack Overflow

Unity WebGL build, how to set canvas size for mobile browsers?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related