Ship your portrait Unity game on the web without distortion: letterbox bars on desktop, full screen on phones. Set it up from an editor window instead of editing HTML. Full C# source.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 WINDOWWindow > 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 AREASafeAreaFitter 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.DEMOWindow > 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.REQUIREMENTSUnity 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 FRAMEWORKIt 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.- 3 assemblies (Editor, Runtime, Demo), full C# source, no DLLs, no dependencies beyond uGUI for the optional parts- Editor: setup window with template installer, marker-based read and write of index.html so hand edits survive, player settings sync, project check, and a template thumbnail generated at the chosen ratio- Runtime: SafeAreaFitter, per axis, editor override, extra padding; polls the safe area because browsers have no reliable event for it- Demo: runtime-built UI with a live readout of window size, target ratio, safe area and orientation- Upgrading from 1.0 is handled: a template without the new markers is detected, its values are read out of the old format and carried into the new one- Verified: all three assemblies compile warning-free with warnings as errors, on Unity 6 and on the legacy code path; an end-to-end check in a real project covers template lookup, the settings round-trip and writing to Assets/WebGLTemplates- Only index.html and thumbnail.png end up in the template folder, because Unity copies every file from there into your buildAI/ML (large language models) was used as a coding and writing assistant: generating and refactoring the template's HTML/CSS/JS, and drafting the documentation and store text. The concept, design, testing, and all final decisions are human (Daniel Schnurbusch). The package contains only original template code and text — no AI-generated art, audio, or third-party assets are included.
