Fullscreen Clock in Every Browser: Chrome, Firefox, Safari, Edge

Press F11. That single key expands a clock to fill your entire display, hiding every toolbar, tab, and dock. But F11 stretches the whole browser window. A clock page that uses the Fullscreen API does something smarter: it hands the screen to the clock digits alone and resizes them to fit the new space. You need the API route for a clock that adapts its layout. You need the keyboard shortcut for speed. Here is exactly what to do in Chrome, Edge, Firefox, Safari, and on a phone.

How a fullscreen clock takes the whole display

The Fullscreen API, standardized between 2012 and 2014, lets a page request that a single piece of itself expand to fill the screen. The browser hides its own chrome and the operating system's taskbar or dock, then flashes a brief confirmation.

Two routes produce a large clock, and they are not identical.

The browser's own fullscreen command, bound to F11 on most desktop platforms, expands the entire window. The Fullscreen API, triggered by a tap on the clock itself, expands only the clock and fires a fullscreenchange event. That event is what lets the page resize its digits to fill whatever space it has been handed. Pick the API route. The page adapts rather than merely stretching.

You cannot load a page and have it go fullscreen automatically. The Fullscreen API demands a user gesture: a click or a keypress. Browsers block silent requests by design. Otherwise every site you visited would yank your screen into kiosk mode without asking. The pattern is always the same: load the page, click the fullscreen control, and the clock expands.

Chrome and Edge: make the clock fill the screen

Chrome and Edge share the same engine, so the steps are identical. Open your fullscreen clock page. Click the fullscreen control on the page itself. That triggers the Fullscreen API and gives the clock the signal it needs to resize its digits. Alternatively, press F11 on Windows or Linux, or Control+Command+F on macOS, to expand the entire browser window.

The F11 shortcut works in Chrome, Edge, Firefox, and most Chromium-based browsers. Press it again to return the window to its previous size and position. In Chrome and Edge, the three-dot menu has a zoom row with a fullscreen icon at its right-hand end. In Firefox, the hamburger menu carries the same control.

On a laptop with a function-key row that defaults to media controls, F11 may need the Fn key held alongside it. That is the single most common reason the shortcut appears to do nothing. If you press F11 and nothing happens, hold Fn and press it again.

Firefox: fullscreen clock setup

Firefox follows the same pattern. Open the page, click the page's own fullscreen control to use the Fullscreen API, or press F11 for the browser-window route. The hamburger menu (three horizontal lines at the top right) contains the fullscreen toggle in its zoom section.

Firefox has one quirk. When you enter fullscreen through the API, the browser shows a small notification telling you how to exit. That notification fades after a few seconds. If you are setting up a clock for a public display or a kiosk, it can be distracting. The F11 route does not show that notification. The browser treats it as a user-level action rather than a page-level request.

For a clock you intend to leave running, click the page's own fullscreen control. The page can then adapt its layout. The F11 route stretches the browser window, which works but does not give the page the same signal.

Safari and Mobile Safari: what works and what does not

Safari on macOS uses Control+Command+F, the same shortcut as other macOS browsers, and also offers the green traffic-light button at the top left of the window. Either route puts the window into its own macOS full-screen space.

A full-screen window becomes a separate space, reachable by swiping between desktops. That is convenient for a clock you want to keep running alongside other work, but surprising if you expected the window simply to grow. Move the mouse to the top of the screen to bring the menu bar and the browser toolbar back temporarily without leaving fullscreen at all.

Mobile is where the fullscreen clock gets inconsistent. Android browsers support the Fullscreen API in the ordinary way, so a control on the page can expand it. Safari on iPhone does not offer fullscreen for ordinary page elements, so a different approach is needed there.

On an iPhone, add the page to your Home Screen from the share sheet, then launch it from the resulting icon. It opens without Safari's toolbars, which is as close to a fullscreen clock as iOS allows. On an iPad, element fullscreen works, and the same Home Screen trick is available as a fallback.

Why the Fullscreen API demands a click

The Fullscreen API requires a user gesture to activate. Any site that claims otherwise is either wrong or using a workaround that will break. The requirement exists because the API is powerful: it hides the browser's interface, and with it, your ability to see the URL, open tabs, or close the window. Browsers do not hand that power to pages without explicit consent.

The practical consequence: always click the clock's fullscreen control, or press the keyboard shortcut, after the page loads. The clock cannot do it for you. Once you have activated it, the page gets a fullscreenchange event, which is what lets it resize its digits to fill the new space.

There is a second consequence. Fullscreen mode only controls window presentation. It does not keep your screen awake. The Screen Wake Lock API is a separate standard, widely supported in Chromium browsers by 2020, with Safari adding support later. It requires the page to be visible and, in some implementations, a user gesture. If you want a clock that stays on while you work, you need both: the fullscreen clock for presentation, and the wake lock for the screen. The Screen Wake Lock and Battery page covers the details.

Browser-specific quirks and workarounds

Each browser has its own edge cases. In Chrome, the Fullscreen API works on Windows, macOS, Linux, and Android, but the Android implementation varies by vendor. In Firefox, the API has been stable for years, but the browser's strict tracking protection can interfere with some embedded content. In Safari, the API works on desktop but not on iPhone for ordinary page elements.

The workaround for iPhone is the Home Screen route: add the page, launch it from the icon, and you get a clean, toolbar-free clock. For Android, the page's own fullscreen control is the most reliable path. For desktop, the F11 shortcut is universal, but the page's own control is better for layout adaptation.

One quirk that affects all browsers: the Fullscreen API only works on an element that is present in the page. If you have a clock that dynamically creates its display element after load, you may need to click twice (once to create the element, once to go fullscreen). Most clock pages build the element at load, so a single click works.

How to exit fullscreen mode

Exiting fullscreen is simpler than entering it. Press F11 on Windows, Linux, or Chromium-based browsers. Press Control+Command+F on macOS. Press Escape on any desktop platform. The Fullscreen API treats Escape as the universal exit key, and the browser restores the window.

On a phone, the exit gesture varies. On Android, swipe down from the top of the screen to reveal the browser controls, then look for the fullscreen icon. On iPhone, the Home Screen route means there is no fullscreen to exit. The page simply occupies the whole screen, and you leave it by switching apps or pressing the Home button.

If you are using the page's own fullscreen control, the same control usually toggles back. The page listens for the fullscreenchange event and can show a "Leave Fullscreen" button. Some pages also support the Escape key even when the focus is inside the fullscreen element, because the browser intercepts it first.

Troubleshooting: fullscreen not working

The most common failure: you pressed F11 and nothing happened. Check the Fn key. On laptops with a media-key row, F11 may be mapped to a volume or brightness control, and you need Fn+F11.

The second most common failure: the page's fullscreen control does nothing. This usually means the page has not been granted the Fullscreen API permission, or the browser has blocked it. Check the address bar for a fullscreen icon. Chrome and Edge show one when a page is in fullscreen, and clicking it exits. If the icon is not there, the page may not have requested fullscreen at all.

The third failure: the clock is fullscreen, but the screen dims or locks. That is the Screen Wake Lock API, not the Fullscreen API. The two are separate, and a fullscreen clock does not keep the screen on. You need to request the wake lock separately, and not all browsers support it. The Screen Wake Lock and Battery page covers this in depth.

The fourth failure: the clock is fullscreen, but the digits are tiny or misaligned. That is a layout problem, not a fullscreen problem. The page needs to listen for the fullscreenchange event and resize its display element accordingly. Most clock pages handle this automatically. If yours does not, try the browser's F11 route instead, which stretches the window and may give you a larger presentation.