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.