Intenta con este código.
<html>
<head>
<title>News</title>
</head>
<body><div class="container">
Este texto lo puedes ver a pantalla completa
<section class="main-content">
<p>
<button id="mostrar-fullscreen">Pantalla completa</button>
<button id="cancelar-fullscreen">Pantalla Normal</button>
</p>
</section>
</div>
<script>
(function () {
var viewFullScreen = document.getElementById("mostrar-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
var cancelFullScreen = document.getElementById("cancelar-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
})();
</script>
</body>
</html>
Esta es una funcionalidad que aun no es un estándar de javascript pero será validada por la mayoría de los navegadores modernos del mercado.
Si quedas con alguna duda estaré atento a tus comentarios.