(Unity) Fitted WebGL Template

Fitted WebGL Template, a responsive WebGL build template that fills the viewport while keeping aspect ratio constraints.

Features:

• Scales canvas to fit the window horizontally and vertically while maintaining aspect ratio (can be disabled).
• Clamps aspect ratio between a configurable minimum and maximum, ensuring the canvas makes full use of the viewport on both ultra wide monitors and tall mobile screens; just like a desktop build would.
• Centers canvas in the window.
• Customizable background color.
• Small loading bar at the bottom of the screen with a fade out on completion.
• Pixel art rendering mode via CSS "image-rendering: pixelated".
• Mobile viewport meta tag injected automatically on iOS/Android.

How to use:

1. Download and unzip.
2. Copy the "WebGLTemplates" directory into your project's "Asset" folder.
3. Edit → Project Settings… → Player → Web tab → Resolution and Presentation → Select the "Fitted" WebGL template.
4. (Optional) Customize settings, see below.

Settings:

• Background (default: #000)

The page background color shown when the viewport goes outside the given aspect ratio. The field accepts any valid CSS color value (hex, rgb, named colors, etc.).

• Scale to fit (default: true)

When true, the canvas is scaled up or down to fill as much of the browser viewport as possible while preserving aspect ratio. When false, the canvas renders at the exact pixel dimensions set in Player Settings and is centered in the window.

• Min aspect ratio (default: 1.333, i.e. 4/3)

The narrowest aspect ratio the canvas will become. If the viewport is taller than this ratio (e.g. a portrait phone screen), the canvas won't stretch beyond 4:3; it will shrink to fit the width and leave background space above and below. Increase this value to keep your game wider on tall screens (e.g. 9/21 for a portrait phone screen)

• Max aspect ratio (default: 2.333, i.e. 21/9)

The widest aspect ratio the canvas will become. If the viewport is wider than this ratio (e.g. an ultra wide monitor), the canvas won't stretch beyond 21:9; it will shrink to fit the height and leave background space on the sides. Lower this value to keep your game from becoming too wide on panoramic displays.

• Optimize for pixel art (default: false)

When true, applies CSS "image-rendering: pixelated" (and vendor-prefixed equivalents) to the canvas. This disables bilinear filtering so pixels stay sharp and blocky when scaled up, which is essential for pixel art games. When false, the browser's default smoothing is used, which softens edges during scaling, this is better for high resolution or illustrated art styles.