diff --git a/src/mining.html b/src/mining.html index 697c6bd..49540c2 100644 --- a/src/mining.html +++ b/src/mining.html @@ -294,6 +294,25 @@ METADATA:{ width: 100vw; height: 100vh; } + + /* Fallback for iOS/Mobile */ + .mining-container.pseudo-fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + max-width: none; + aspect-ratio: auto; + border: none; + background: #87CEEB; + z-index: 9999; + margin: 0; + } + .mining-container.pseudo-fullscreen #game-canvas { + width: 100vw; + height: 100vh; + } diff --git a/website/mining.js b/website/mining.js index c0878ee..6d276de 100644 --- a/website/mining.js +++ b/website/mining.js @@ -1886,12 +1886,41 @@ document.addEventListener('DOMContentLoaded', () => { // Fullscreen window.toggleFullscreen = function() { const elem = document.querySelector('.mining-container'); - if (!document.fullscreenElement) { - elem.requestFullscreen().catch(err => { - console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); - }); + const doc = document; + + const isNativeFullscreen = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement; + const isPseudoFullscreen = elem.classList.contains('pseudo-fullscreen'); + + if (!isNativeFullscreen && !isPseudoFullscreen) { + // Enter Fullscreen + if (elem.requestFullscreen) { + elem.requestFullscreen().catch(err => { + console.log("Native fullscreen failed, using fallback."); + elem.classList.add('pseudo-fullscreen'); + }); + } else if (elem.webkitRequestFullscreen) { + elem.webkitRequestFullscreen(); + } else if (elem.msRequestFullscreen) { + elem.msRequestFullscreen(); + } else { + // No API support (e.g. iOS Safari) + elem.classList.add('pseudo-fullscreen'); + } } else { - document.exitFullscreen(); + // Exit Fullscreen + if (isNativeFullscreen) { + if (doc.exitFullscreen) { + doc.exitFullscreen(); + } else if (doc.webkitExitFullscreen) { + doc.webkitExitFullscreen(); + } else if (doc.mozCancelFullScreen) { + doc.mozCancelFullScreen(); + } else if (doc.msExitFullscreen) { + doc.msExitFullscreen(); + } + } + // Always remove pseudo class + elem.classList.remove('pseudo-fullscreen'); } };