Open webpage in fullscreen in Safari on iOS

Question

There is a fullscreen mode in Safari on iOS. Is it possible to activate this through javascript or similar?

Thanks

It happens when your page has the "apple-mobile-web-app-capable" meta tag, and it's launched from an icon on the device "desktop". — Pointy, May 10 '13 at 15:42

score 28 · Accepted Answer · answered May 10 '13 at 16:17

28

No, there is no way to toggle the fullscreen mode in Safari on iOS using javascript.

In order for a web page to run in fullscreen mode, you need to add the following meta tag, and the page needs to be started from a bookmark on the home screen:

<meta name="apple-mobile-web-app-capable" content="yes">

However, you can detect if the page is running in fullscreen mode or not with javascript using the read only property:

window.navigator.standalone

answered May 10 '13 at 16:17

Strille

5,741
2
26
40

2

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html – Simon_Weaver Jun 19 '17 at 05:41
1

In my test window.navigator.standalone always console false in fullscreen mode and non-fullscreen mode. Its non-working answer. – Руслан Aug 11 '20 at 13:58
1

Going through the bookmark route did not work for me, but clicking the share button, then "Add to Home Screen" did. Once I open from my 'desktop' then it goes into fullscreen. – jsibs Nov 05 '20 at 21:32
looks like once you are in full screen mode there is no way of getting out of it? – uwe Oct 08 '21 at 17:34

score 1 · Answer 2 · answered Jun 28 '20 at 13:21

1

Aftier iOS >= 12, There is only way to toggle to fullscreen through native API in Safari.

    if (document.webkitFullscreenElement) {
      document.webkitCancelFullScreen();
    } else {
      const el = document.documentElement;
      el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }

answered Jun 28 '20 at 13:21

lqs469

395
3
7

2

The document has no fullscreen functions on my iPhone. In a debug console: ```javascript (() => { var keyz = []; for(var k in document) keyz.push(k); return keyz })().filter(k => /fullscreen/i.test(k)) ``` returns `[]` – Brian Dunn Oct 22 '20 at 17:36
2

I'm afraid on iOS 14.3 I don't see it either. – treeno Jan 03 '21 at 14:34
2

I believe this only works on iPad, not iPhone. See the notes for iOS Safari here: https://caniuse.com/?search=fullscreen – UnknownDeveloper Jul 23 '21 at 15:39
doesn't seem to work on iPad iOs 14.4.2 – uwe Oct 08 '21 at 17:08
1

Only works on iPad AND only on ` – Mahn Oct 22 '21 at 15:59

Open webpage in fullscreen in Safari on iOS

2 Answers2

Linked