H5 Game Iframe & Scaler Lab

Diagnostic Suite

Outer Scaler vs. Iframe Viewport Isolation Tester

Quick Spawn:

Sample H5 Demos:

Active Test Iframes (0)

| Drag bottom-right corner of any frame to test live responsive canvas scaling

Why the Scaling Bug is in the H5 Game, Not the Iframe

Technical Breakdown & Solutions for HTML5 Game Engine Developers

The Core Reality of HTML5 Iframes:

An <iframe> is completely transparent to the game inside. It provides standard window.innerWidth and window.innerHeight, and fires the exact same 'resize' event as a native mobile browser window. The iframe itself does NOT crop, stretch, or distort canvas pixels.

Top 4 Flaws in Custom H5 Game Outer Scalers:

1. Reading screen.width instead of window.innerWidth

When inside an iframe, screen.width returns the user's entire physical screen (e.g. 1920px), while the iframe might only be 390px. The game tries to scale to 1920px, causing severe off-screen overflow.

2. Hardcoded Orientation Assumption

Many mobile games assume that mobile devices are always in portrait mode or read window.orientation. If the parent container renders in landscape, the outer scaler fails to recalculate aspect ratios.

3. CSS transform: scale() without Center Transform Origin

Developers often scale the canvas wrapper using CSS transform without setting transform-origin: center center or without accounting for touch/mouse coordinate translation.

4. Single-Shot Boot Scaling (No Resize Listener)

The game calculates canvas width/height only once on window.onload. When the iframe or responsive layout changes dynamically, it never triggers a re-scale.

Recommended Universal Outer Scaler Code (JavaScript):

function resizeGameCanvas(canvas, targetWidth = 1080, targetHeight = 1920) {
  // Always use window.innerWidth & innerHeight inside iframe
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;

  // Calculate scale while maintaining aspect ratio (Fit with Letterboxing)
  const scale = Math.min(viewWidth / targetWidth, viewHeight / targetHeight);

  canvas.style.width = `${Math.floor(targetWidth * scale)}px`;
  canvas.style.height = `${Math.floor(targetHeight * scale)}px`;
  canvas.style.position = 'absolute';
  canvas.style.left = '50%';
  canvas.style.top = '50%';
  canvas.style.transform = 'translate(-50%, -50%)';
}

// Attach to both load and resize events
window.addEventListener('resize', () => resizeGameCanvas(document.querySelector('canvas')));
window.addEventListener('orientationchange', () => resizeGameCanvas(document.querySelector('canvas')));
document.addEventListener('DOMContentLoaded', () => resizeGameCanvas(document.querySelector('canvas')));