Как решить проблему с переходом в полноэкранный режим?

Question

GirlInIT @GirlInIT

HTML

Как решить проблему с переходом в полноэкранный режим?

Добавила на страницу кнопку для перехода в полноэкранный режим (как если бы нажали F11), но почему-то когда на нее нажимаешь, то все элементы на странице становятся больше.
Пример:

На второй картинке видно, как кнопки стали больше и перестали влазить в одну строку.
Однако если нажать F11 на клавиатуре, то никаких изменений не происходит.
Прикладываю код примера

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="text-center">
      <button class="btn btn-lg btn-default">1 кнопка</button>
      <button class="btn btn-lg btn-default">2 кнопка</button>
      <button class="btn btn-lg btn-default">3 кнопка</button>
      <button class="btn btn-lg btn-default">4 кнопка</button>
      <button class="btn btn-lg btn-default">5 кнопка</button>
      <button class="btn btn-lg btn-default">6 кнопка</button>
      <button class="btn btn-lg btn-default">7 кнопка</button>
      <button class="btn btn-lg btn-default">8 кнопка</button>
    </div>
    <button class="btn btn-lg btn-default goFS">Go FS</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script>
      $(function() {
        $(document).on('click', '.goFS', function(e) {
            if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                // current working methods
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                }                          
            } 
            else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }                          
            }
        });    
      });
    </script>
  </body>
</html>