Fullscreen on iPhone and iPad

If you have ever tapped a fullscreen button on an iPhone and watched nothing happen, you were not looking at a broken website. Safari on iOS deliberately restricts the Fullscreen API, and understanding the restriction makes it much easier to work around.

The restriction in Safari

Desktop browsers allow any element to request fullscreen. Safari on iOS does not. Historically, the only element allowed to go fullscreen on iOS has been a video element, and only through the native video player — which is why the black screen on other sites appears to do nothing at all when you tap the button.

There is a second constraint that compounds the problem: on iOS, the address bar and toolbar are managed by Safari and can only be collapsed by scrolling the page, not by a script. So even a perfect overlay still sits inside a browser chrome that cannot be fully hidden.

How our overlay fallback works

When a fullscreen request fails, we do not give up. Instead of asking the browser to go fullscreen, we make the screen element look like it did:

• It is promoted to a fixed position covering the viewport, ignoring page layout.
• Its height is set to 100dvh, the dynamic viewport unit, so it tracks Safari's collapsing toolbar rather than overflowing behind it.
• Scrolling and overscroll are locked on both the document and the body, so a stray swipe cannot drag the page behind the overlay into view.
• Tap highlighting and text selection are disabled, so touching the panel does not flash or select anything.
• In-stage controls dim automatically after a few seconds, leaving only the screen.

The result is not technically the Fullscreen API, but on a phone held in your hand it behaves the way you expect: the tool fills the display, nothing else is visible, and a tap reveals a single exit control.

Add to Home Screen

This is the single best improvement on iOS, and it takes about five seconds. Install the site as a web app and it launches without Safari's chrome at all.

1. Open this site in Safari on your iPhone or iPad.
2. Tap the Share button — the square with the arrow pointing up.
3. Scroll down and choose Add to Home Screen.
4. Name it and tap Add.

Launch it from the home screen and you get a full-screen app window with a black status bar, no address bar and no toolbar. For a pure black screen this makes an enormous difference — merging with the status bar is what makes the display feel genuinely edge-to-edge.

The installed version also keeps working with no connection at all, which matters if you use the black screen as a bedside clock or a light source somewhere without Wi-Fi.

Getting out of fullscreen

• Tap the screen to reveal the exit control, then tap it.
• Press Escape if you have a keyboard connected — on iPad this is often the fastest route.
• Swipe up from the bottom edge to leave the app entirely, which always works.

The exit control is deliberately placed away from the centre of the screen so that a stray tap while you are using the screen as a light source does not dismiss it.

Android and desktop

Android Chrome, Edge, Firefox and Samsung Internet all support the Fullscreen API and will go genuinely fullscreen, including hiding the system bars where the browser allows it. Desktop browsers on Windows, macOS, Linux and ChromeOS also go fully fullscreen, and on macOS you can assign the app its own Space if you want it permanently available on a second display.

Small-screen tips

• Turn on keep-awake. iPhones dim aggressively. The Wake Lock toggle stops the display sleeping while the tab is visible, on iOS 16.4 and later.
• Disable auto-brightness while you work. Settings → Accessibility → Display & Text Size → Auto-Brightness. A panel that keeps adjusting itself makes any visual test unreliable.
• Use a stand for long sessions. A phone propped up at eye level is easier on your neck and keeps the screen at a consistent distance.
• Turn on True Tone off for colour work. True Tone shifts the white point based on ambient light, which is great for reading and terrible for judging colour.