PortraitFit — Portrait WebGL Template for Unity

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.

FROM THE SAME PUBLISHER

Every Schnurbusch tool follows the same rule: one line of code, your project stays as it is, full C# source.

HintOnce, free: first-time hints with one line of code

https://assetstore.unity.com/packages/tools/gui/hintonce-first-time-hints-with-one-line-of-code-396738

LocLayer: localize without refactoring

https://assetstore.unity.com/packages/tools/localization/loclayer-localize-without-refactoring-394954

ChipForge: procedural retro SFX and music, zero audio files

https://assetstore.unity.com/packages/tools/audio/chipforge-procedural-retro-sfx-music-zero-audio-files-386476

All tools, manuals and what is coming next: https://schnurbusch.github.io