bevy_github_ci_template icon indicating copy to clipboard operation
bevy_github_ci_template copied to clipboard

Update html template css to better handle full screen canvas window

Open claudijo opened this issue 2 years ago • 1 comments

Update css in index.html according to the discussion https://github.com/bevyengine/bevy/pull/4726 under the heading Easy "fullscreen window" mode for the default canvas.

Before this change setting window option fit_canvas_to_parent to true and building for the web will result in the canvas element growing vertically each time the window is resized regardless if the window is made wider or narrower. Also the canvas element height is not adjusted correctly if loaded in a browser window with a height is less than the canvas height.

With this change the canvas element grows and fits the browser window as expected, not least if published to itch.io and loaded in a mobile web browser.

claudijo avatar Oct 16 '23 18:10 claudijo

I can confirm that these change make the itch.io fullscreen mode work.

But as the bevy PR, it also requires to set fit_canvas_to_parent: true in the primary_window setting of the WindowPlugin.

So I suggest that we also update the src/main.rs in this template to include this configuration, something like :

        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                fit_canvas_to_parent: true,
                ..default()
            }),
            ..default()
        }))

This way, the template fully work for itch.io publication out of the box.

BorisBoutillier avatar Jan 17 '24 11:01 BorisBoutillier