Estoy tratando de hacer que un div pase a pantalla completa, cuando un usuario hace clic en un botón en un sitio web.

Lo único es que todos los navegadores parecen querer funcionar excepto Safari en IOS.

¿Qué tendré que hacer para poder hacerlo en pantalla completa? He intentado investigar, pero no puedo encontrar nada.

Aquí está mi código actual:

 <script type="text/javascript"> function goFullscreen(id) { var element = document.getElementById(id); var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null); var docElm = document.documentElement; if (!isInFullScreen) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } </script>