You can make One Click Web Page Full Screen Button. Below the HTML Structure.

Follow the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Page Full Screen Jvascript Code</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sniglet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/pirala-style.css">
</head>
<body>

<div class="container">
    <div class="fun-cube"><i class="fa fa-product-hunt"></i></div>
    <h1>HTML Page Full Screen Jvascript Code</h1>

    <div id="pirala">
        <h2><a href="#" id="btn-fullscreen">Full Screen Click Here</a></h2>
    </div>

</div>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/pirala-js.js" type="text/javascript"></script>

</body>
</html>

 

One Click Web Page Full Screen Button Using jQuery. Below the jQuery.

Follow the jQuery:

(function($) {
    var FullScreen = function() {
        this.$body = $("body"),
        this.$fullscreenBtn = $("#btn-fullscreen")
    };
    //turn on full screen
    FullScreen.prototype.launchFullscreen  = function(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    FullScreen.prototype.exitFullscreen = function() {
      if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    //toggle screen
    FullScreen.prototype.toggle_fullscreen  = function() {
      var $this = this;
      var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
      if(fullscreenEnabled) {
        if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
          $this.launchFullscreen(document.documentElement);
        } else{
          $this.exitFullscreen();
        }
      }
    },
    //init 
    FullScreen.prototype.init = function() {
      var $this  = this;
      //bind
      $this.$fullscreenBtn.on('click', function() {
        $this.toggle_fullscreen();
      });
    },
     //init FullScreen
    $.FullScreen = new FullScreen, $.FullScreen.Constructor = FullScreen


    //initializing main application module
    var App = function() {
        this.pageScrollElement = "html, body", 
        this.$body = $("body")
    };
    
    //initilizing 
    App.prototype.init = function() {
        var $this = this;
        $.FullScreen.init();
    },
    $.App = new App, $.App.Constructor = App

    $.App.init();
})(window.jQuery);

 

Live View             Download File