CODEWITHSUNDEEP
htmlios6mobile-safarifullscreen
R.C.
R.C.

Reputation: 231

Full screen api HTML5 and Safari (iOS 6)

I'm trying to make an application to run in full screen mode (without the top bar) in Safari for iOS 6.

The code is as follows:

var elem = document.getElementById("element_id");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

It works well on desktop browsers. But in Mobile Safari (iOS) 6 does not work.

Any idea about this issue?

Upvotes: 22

Views: 62645

Answers (8)

keytrap
keytrap

Reputation: 480

Please see my other answer here https://stackoverflow.com/a/73478424/3673720

Long story short: for iOS use webkitEnterFullscreen()

Upvotes: 0

Marvin Danig
Marvin Danig

Reputation: 3938

@Tom-Andraszek is partially correct. Apple has separated iPadOS from iOS lately (as of early 2019) and they now support the fullscreen api on the iPadOS Safari only.

Here is how you can implement fullscreen functionality for your web-app for iPadOS 12.x Safari and above:

Going fullscreen on iPad Safari.

Disclosure: The blog shared on the aforementioned link is mine. It is pertinent to also mention that Chrome and other browsers on iPadOS still don't support the fullscreen api.

Upvotes: 2

user10251509
user10251509

Reputation:

There is a really nice hack to emulate fullscreen mode and the user can enter or leave it as he is willing to. I really have no clue why it is working or whether it is working on other platforms at all, but on my iPhone Safari it looks like expected.

Nevertheless, this solution has some limitations. It can only be used for Web Apps which do not use more space than the screen can offer, and the user has to change to landscape mode after the page has loaded.

Give your html and body 100% height and width

html, body {
  /* Avoid ugly scrollbars */
  overflow: hidden;
  /* Reset default browser paddings etc */
  margin: 0;
  padding: 0;
  border: 0;
  /* 100% size */
  width: 100%;
  height: 100%;
}

Now the hacky part. Give your body 1px margin at the top

body {
  margin-top: 1px;
}

The last thing you have to do is putting all your Web App's content into an extra div with position fixed so that the margin won't affect it

.wrapper {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

Et voilà. Rotate your device and see these ugly navigation bars disappear. Perfect for real fullscreen games.

I am sure, this can be used as a polyfill somehow, although not everybody want to make a fullscreen game.

I hope it will be useful for somebody.

Darth Moon

Upvotes: 0

Slack Undertow
Slack Undertow

Reputation: 801

Six years after this question was asked..., the "webkit"-prefixed fullscreen API now seems to work in mobile Safari in iOS 12.1 on an iPad, but not on an iPhone. It doesn't seem to be reported yet at CanIUse, and the only Apple information I've found so far are line items regarding iOS 12 in the "What's New in Safari" page and release notes and a tweet:

Yesterday, I updated my iPhone and iPad to iOS 12.1 from iOS 11.x. The full screen API is working for me in Safari on the iPad but not the iPhone. On the iPad, "alert(document.fullscreenEnabled)" displays "undefined", but "alert(document.webkitFullscreenEnabled)" displays "true". On the iPhone, both display "undefined".

Playing with the following script, I'm able to display in full screen mode in Safari on the iPad.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #target {
            width: 150px; height: 100px; padding: 50px 0 0 0;
            margin: 50px auto; text-align: center;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div id="target">Click or touch me</div>
    <script>
        (function(w) {
            "use strict";
            var d = w.document;
            var t = d.getElementById("target");

            t.addEventListener("click", function() {
                d.documentElement.webkitRequestFullscreen();
                // Compare alternative to preceding line, calling
                // method on target element instead:
                // t.webkitRequestFullscreen();
                // And compare changing target's style on change:
                // t.style.width = "100%";
                // t.style.height = "100%";
            });

            // alerts "undefined" in iOS 12.1 Safari on iPad and iPhone
            alert(d.fullscreenEnabled);
            // alerts "true" in iOS 12.1 Safari on iPad, "undefined" on iPhone
            alert(d.webkitFullscreenEnabled);
        }(window));
    </script>
</body>
</html>

Upon displaying in full screen, Safari on the iPad inserts an "X" UI element in the upper left corner to touch for exiting full screen.

Playing with the demo page of a 2014 full screen API tutorial at Site Point worked well on my iPad also. Beware, playing with the older, outdated demo page of the 2012 version of the Site Point tutorial twice froze my iPad in Safari, and I had to reboot the iPad to escape.

Playing with the demo page of the screenfull.js library worked well on my iPad too.

Upvotes: 11

May Peng
May Peng

Reputation: 61

https://developer.apple.com/reference/webkitjs/htmlvideoelement

if (elem.webkitEnterFullScreen) {
  elem.webkitEnterFullScreen();
}

It works for me.

Upvotes: 6

Victor
Victor

Reputation: 1157

The following scrolls the status bar in iOS out of the way. Call it early in your $(document).ready

$('body').scrollTop(1);

This works in up to version 6.x at the moment but doesn't appear to work in the beta version of iOS7's browser. As always, the browser toolbar at the bottom is fixed.

Upvotes: 1

Adam Davis
Adam Davis

Reputation: 93645

You can't use the full screen. If you set the meta tags correctly, and put the web app on the home screen, then you can get rid of all the safari cruft, but you're still left with the iOS status bar (connectivity, clock, battery). 

<meta name="apple-mobile-web-app-capable"
  content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
  content="black-translucent" />

There are a number of resources for this, here's the one I've been using:

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Apple's own documentation is good as well:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

But, in short, you cannot, as of iOS 6.1, deploy a full screen web app on iOS devices. The status bar will always be present.

Upvotes: 7

ndm
ndm

Reputation: 60503

It's not supported...

http://caniuse.com/fullscreen

Upvotes: 28

Related Questions