PortraitFit — Portrait WebGL Template for Unity

Publisher

schnurbusch

Please Note

This entry is from Wednesday August 19, 2026. The price of the asset may have changed since then.
Please visit our homepage for recent offers and sales. Official and private Unity Asset Store™ sales usually last about 14 days.

Overview

Unity's default WebGL page assumes a landscape game. If your game is portrait, built at 9:16 for phones, that page squeezes or distorts it. On desktop it looks broken, and inside an itch.io embed it looks worse.

PortraitFit keeps your game pixel-true on every screen:

- Landscape windows (desktop): a centered portrait column with clean letterbox bars. No distortion, no squeezing.

- Portrait windows (phones): the game fills the screen, or strictly keeps its ratio, whichever you choose.

SET UP FROM A WINDOW

Window > PortraitFit > Setup does the whole job.

- Install template copies it to Assets/WebGLTemplates for you, which is the only place Unity looks.

- Aspect ratio presets for 9:16, 10:16, 3:4, 2:3 and 1:1, plus free entry.

- Colors as normal Unity color fields: background and letterbox bars, loading text, and the three progress bar colors.

- Switches for fill behaviour on phones, the built-in fullscreen button, and the loading screen.

- One click sets PortraitFit as your WebGL template and puts the default canvas in your ratio.

- A project check shows whether the template is installed, whether the player settings point at it, and whether the canvas is portrait. That is where the classic "it still looks stretched" mistake shows up.

The window reads the values back out of index.html, so the file stays readable and you can still edit it by hand.

SAFE AREA

SafeAreaFitter handles what the page cannot: notches, punch-hole cameras and home indicators. Put it on a full-screen child of your Canvas and parent your UI to it. Per axis, with an editor override and extra padding.

DEMO

Window > PortraitFit > Add Demo To Scene drops in a component that builds its UI at runtime, no prefab and no scene file. It shows window size, target ratio, safe area and orientation live.

REQUIREMENTS

Unity 6 or newer. The template itself is plain HTML, CSS and JavaScript with no build tools. SafeAreaFitter and the demo need uGUI; without it those assemblies exclude themselves and the template still works.

Battle-tested: this template ships with my game Famechaser, on desktop and mobile.

NOT A RESPONSIVE UI FRAMEWORK

It makes the page around your game behave and gives you a safe-area helper inside it. Laying out your UI so it survives different ratios is still your job.