Large screen display function has been done in the project, in which the requirement is to display in full screen. It happens that the full screen in HTML 5 meets the requirement, which is recorded here.
The full screen in HTML 5 can be used in browsers other than IE and opera. Sometimes it is used to make full screen APIs, games, etc. First look at the common APIs

 element.requestFullScreen()

Function: to request the full screen of an element element

Document.getElementById("myCanvas").requestFullScreen()

Here, the element ID is used to request fullscreen

Exit full screen

document.cancelFullScreen()

Document.fullScreen

Returns true if the user is in full screen mode

document.fullScreenElement

Returns the element currently in full screen mode
The following code turns on full screen mode:

  function fullScreen(element) { 
	  if(element.requestFullScreen) { 
	 	 	element.requestFullScreen(); 
	 } else if(element.webkitRequestFullScreen ) { 
	   		element.webkitRequestFullScreen(); 
	  } else if(element.mozRequestFullScreen) { 
	  		element.mozRequestFullScreen(); 
	 } 
 }

The following code calls the full screen mode for the whole page

But to be honest, there is a problem with FULL SCREEN, which is easy to cheat, such as in
http://feross.org/html5-fullscreen-api-attack/ Among them, there is a good DEMO to cheat. For example, a link says http://www.bankofamerica.com , people think it's Bank of America. If you go in a little, you'll deceive people because you use the full screen API

$('html').on('click keypress', 'a', function(event) { 
  // Does not respond to real A HREF click events 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //Show fake UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 });

Let's introduce the methods, properties and events of JavaScript controlling the full screen mode of various browsers
The browser's full screen startup function requestFullscreen still needs to be accompanied by the js dialect prefix of each browser. I believe the following code needs a lot of search:

// Judge various browsers and find the correct method
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// Start full screen!
launchFullScreen(document.documentElement); // Entire web page
launchFullScreen(document.getElementById("videoElement")); // A page element

Call the full screen method for the page element you want to display in full screen, and the browser window will become full screen, but the user will be asked to allow full screen mode first. Note that users are likely to reject full screen mode. If the user runs full screen mode, the browser toolbar and other button menus will be hidden, and your page will cover the whole screen.
Exit full screen mode
This exitFullscreen method (which also needs to be prefixed with the browser) will make the browser exit full screen mode and become normal mode.
//Determine browser type

function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// Exit full screen mode!
exitFullscreen();

Full screen properties and events

Unfortunately, full screen properties and event related methods also need to add browser prefixes, but I'm sure they won't need to do so soon.
1.document.fullScreenElement: Web page element displayed in full screen.
2.document.fullScreenEnabled: determines whether it is currently in full screen status.
The fullscreenchange event is triggered when you start or exit full screen:
The code is as follows:

 var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

You can still prefix this event using the above method to determine the type of browser.
Full screen style CSS
Various browsers provide a very useful css style rule in full screen mode:

-webkit-full-screen {
 
 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

In some cases, WebKit styles will have some problems. You'd better keep these styles simple.
These full screen APIs are super simple and super useful. I first saw this API in MDN's banana bread demo. It's a shooting game that needs full screen. It uses event monitoring to detect the full screen state. Remember that these easy-to-use APIs can be handy when you need them.