Full screen is not working in Safari [duplicate]

Question

Full screen is working in chrome and other browsers but not working in Safari. Here is my code:

var doc = window.document;
var docEl = document.getElementById("divId");      
//doc.documentElement;

var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement){
  requestFullScreen.call(docEl);
} else { 
  cancelFullScreen.call(doc);
}    

<div id="divId" style="width: 300px;height:60px" > FULL SCREEN </div>

Answer 1

The Fullscreen API is not supported in iOS Safari and has partial support in Safari: more on this.

I would recommend to check out Sindre's cross-browser wrapper, screenfull.js around the Fullscreen API, at least check out the source and get what your current project needs.

If you create a web app, that your users will install, here you can find out more about certain meta tags to specify in order to run your web app in full-screen.

Answer 2

It is Element.webkitRequestFullscreen, lower-case s in Fullscreen.
Only Firefox did set their vendor-prefixed version with a camel-cased FullScreen, ^{_{probably to make everyone's life harder...}}

var requestFullScreen = docEl.requestFullscreen || docEl.webkitRequestFullscreen || docEl.mozRequestFullScreen ||  docEl.msRequestFullscreen;

As a fiddle since StackSnippets' iframes don't allow fullscreen