If you're looking to enable fullscreen mode using HTML5 Fullscreen API, this method is the most appropriate in my opinion.
It's important to note that fullscreen activation needs to be triggered by a user action like clicking or pressing a key; otherwise, it won't work as intended.
For example, here's a button that toggles the div into fullscreen mode when clicked. When in fullscreen mode, clicking the button will exit the fullscreen view.
$('#toggle_fullscreen').on('click', function(){
// If already in fullscreen mode, exit
// Otherwise, go into fullscreen mode
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});
#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
</p>
Your content will now be displayed in fullscreen mode.
</div>
Keep in mind that the Fullscreen API may not work for Chrome on non-secure pages. For more information, please visit https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins.
Additionally, remember to utilize the :fullscreen CSS selector to apply specific styles when an element is in fullscreen mode:
#container:fullscreen {
width: 100vw;
height: 100vh;
}