Responsive HTML5 Game Scaling: The 1.2 Ratio Rule

Responsive HTML5 Game Scaling: The 1.2 Ratio Rule

Honesty note: these are the Phaser scale settings my game ships with, and the 1.2 rule is Phaser’s documented guidance for FIT mode (my setup). The goal: the same game, playable from a phone to an ultrawide, without broken layouts.

TL;DR

1. The 1.2 ratio rule: design your game’s base size with an aspect ratio between 0.6 and 1.2 (e.g. 1280×720 = 1.78 is out; 960×720 = 1.33, 800×720 = 1.11 are in) so that Scale.FIT never letterboxes by much on common screens (the rule).
2. Scale Manager modes: FIT (scale to fit, letterbox — the default choice for games), EXPAND (fit and fill, no letterbox but crops), RESIZE (canvas resizes, you relayout). Pick by what breaks least when the window changes (scale reality).
3. Pixel-perfect matters: for pixel art, integer scaling + roundPixels + nearest-neighbor beats blurry fractional scaling (pixel art rules).
4. The combo that survives devices: FIT + autoCenter: CENTER_BOTH + a base size inside the 1.2 band + mobile viewport meta (user-scalable=no) — then test on phone, tablet, and desktop ratios (testing habit).

The three modes (pick by your tolerance)

For a game with UI at the edges, FIT is the honest default: nothing is cropped, and the 1.2 rule keeps the letterbox small.

The 1.2 rule, concretely

Phaser’s guidance: keep the base aspect between 0.6 and 1.2 so FIT doesn’t letterbox heavily.

My game ships around the 1.11 band — phones get a near-fullscreen fit, desktops get small side bars instead of a giant top/bottom crop (my config).

The working config

const config = {
  type: Phaser.AUTO,
  width: 800, height: 720,            // inside the 1.2 band
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  }
};
// HTML viewport (mobile):
// <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

The device matrix (test these)

1. Phone portrait (e.g. 390×844) — FIT letterboxes sides; UI must be inside the safe area.
2. Tablet (~768×1024) — near-fullscreen; the closest to your design ratio.
3. Desktop 16:9 — small side bars; nothing cropped.
4. Ultrawide (21:9) — wide bars; verify UI isn’t drawn off-canvas (the 3.90 EXPAND fix covers EXPAND here).

Pitfalls

1. Designing at 16:9 with FIT — heavy phone letterbox; the 1.2 rule exists for this.
2. EXPAND for edge UI — crops your score/buttons; FIT for UI games.
3. Fractional scaling on pixel art — blur; integer + roundPixels + nearest-neighbor (pixel art).
4. No mobile viewport meta — zoom-on-tap breaks touch; add it (touch reality).
5. Testing one screen — phones, tablets, and ultrawide are all “somebody’s screen”; test the matrix.

Bottom line

Responsive HTML5 scaling is one decision and one habit: pick a base size inside the 1.2 aspect band, use Scale.FIT + autoCenter for UI games, keep pixel art integer-scaled, add the mobile viewport meta, and test the device matrix. My game ships exactly this way (setup) — and with the 1.2 rule, “it fits” stops being a wish and becomes a setting.