如何以“跨浏览器兼容”全屏模式玩HTML5游戏

Question

我一直在寻找在不同的台式机和移动设备屏幕尺寸上玩HTML5游戏的最简单方法，而且我希望代码具有跨浏览器兼容性，而进入全屏模式！

我尝试了太多的解决方案，但没有按预期工作，其中的一些在特定的浏览器中无法正常工作，而其他的直到我创建此代码并将其测试到html5游戏中后才起作用。

<div class="iframe">
      <iframe id="player" src="https://h5.4j.com/Piano-Tiles-2-Online/index.php?pubid=al3abmizo" allowfullscreen></iframe>
    </div>

    <script>
      function goFullscreen(id) {
        // Add element in fullscreen mode
        var element = document.getElementById(id);
        // Hide function in the browsers that not support fullscreen mode yet, 
        // Check to see if element available before calling it.
        if (element.mozRequestFullScreen) {
          // Fullscren mode in Firefox
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          // Fullscreen mode in Chrome and Safari
          element.webkitRequestFullScreen();
          // Fullscreen mode in IE/Edge
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
       }
       // Fullscreen mode activated for all browsers!
    }
    </script>

    <!-- Play Button -->
    <button class="playbtn" onClick="goFullscreen('player'); return false"><i class="fa fa-compress"></i> Play in fullscreen more</button>

在此处进行测试 https://jsfiddle.net/jodyshop/zd3x6ukL/