Kiosk shell

checking…
Viewport
—
Screen
—
1dvh
—
Pixel ratio
—
Safe top
—pt
Safe bottom
—pt
Safe left
—pt
Safe right
—pt
Active breakpoint
—

Touch targets

Press each one. 44pt is Apple's minimum, not a target. For a wall-mounted screen someone jabs at while standing, 60pt is the working size and 72pt is what you want if gloves are in play.

Breakpoints

The live row is highlighted. Resize a desktop window to walk through them, or rotate the device.

xs 320–374 · below SE
sm 375 · SE, 13 mini
md 390 · iPhone 12–16
lg 430 · Plus, Pro Max
tablet 768 · split view
ipad-port 810–834 · iPad portrait
ipad-land 1024 · 13" portrait
kiosk 1180 · Air 11" landscape
kiosk-xl 1366 · Pro 13" landscape

manifest.webmanifest

Save alongside this file. display: fullscreen hides even the status bar on Android; iOS ignores it and uses the meta tag above instead.

{
  "name": "Kiosk",
  "short_name": "Kiosk",
  "start_url": "/?source=kiosk",
  "scope": "/",
  "display": "fullscreen",
  "display_override": ["fullscreen", "standalone"],
  "orientation": "landscape",
  "background_color": "#101E33",
  "theme_color": "#101E33",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "icons/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ]
}

Before it ships

Lock the device. Guided Access (Settings → Accessibility → Guided Access, triple-click side button) for a single iPad. Single App Mode via Apple Configurator or MDM for a fleet. Without this, someone swipes home inside ten minutes.

Disable idle sleep in Settings → Display & Brightness → Auto-Lock → Never, and keep the device on power.

Service worker. Cache-first for the shell so a dropped network shows your UI rather than the Safari offline page.

You're in a browser tab. Add to Home Screen and relaunch — the safe-area numbers above will change, and that difference is the whole reason to test on device.

Running standalone. These safe-area values are the real ones your layout has to live inside.