index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Full screen iframe implementation">
    <title>Full Screen Iframe</title>
    <style>
        /* CSS Reset for cross-browser consistency */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Base styles */
        html, body {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            position: relative;
        }

        /* Container for iframe with fallback message */
        .iframe-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
        }

        /* Iframe styles with improved performance */
        .responsive-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            overflow: hidden;
            /* Enable hardware acceleration */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            /* Improve scrolling performance */
            -webkit-overflow-scrolling: touch;
        }

        /* Fallback message styling */
        .fallback-message {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 20px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* Show fallback when iframe fails */
        .iframe-error .fallback-message {
            display: block;
        }

        .iframe-error .responsive-iframe {
            display: none;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe 
            src="https://aidark.net/"
            class="responsive-iframe"
            title="Full screen content"
            sandbox="allow-scripts allow-same-origin allow-forms"
            loading="lazy"
            referrerpolicy="no-referrer"
            onload="this.parentElement.classList.remove('iframe-error')"
            onerror="this.parentElement.classList.add('iframe-error')"
        ></iframe>
        <div class="fallback-message">
            <h2>Unable to load content</h2>
            <p>Please check your internet connection and try again.</p>
        </div>
    </div>

    <script>
        // Handle iframe loading errors
        window.addEventListener('load', function() {
            const iframe = document.querySelector('.responsive-iframe');
            const container = document.querySelector('.iframe-container');
            
            // Additional error handling
            iframe.addEventListener('error', function() {
                container.classList.add('iframe-error');
            });

            // Handle resize events efficiently
            let resizeTimeout;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function() {
                    // Trigger reflow only when resize ends
                    iframe.style.height = window.innerHeight + 'px';
                    iframe.style.width = window.innerWidth + 'px';
                }, 250);
            });
        });
    </script>
</body>
</html>
<!-- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Screen Iframe</title>
    <style>
        /* Remove padding and margin for body and html */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        /* Make the iframe full screen and remove the border */
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none; /* Removes the border */
            margin: 0;
            padding: 0;
            overflow: hidden; /* Prevents scrollbars */
        }
    </style>
</head>
<body>

    <iframe src="https://aidark.net/" frameborder="0" scrolling="no"></iframe>

</body>
</html>
 -->