Widget:GOV-Test

Variante: responsiv

 <style>
   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }

   .iframe-wrapper {
     width: 100%; /* Volle Breite des Containers */
     position: relative;
     overflow: hidden; /* Überschüssige Inhalte außerhalb der Box ausblenden */
   }

   iframe {
     position: relative;
     border: none;
     transform-origin: top left; /* Skalierung startet oben links */
   }

   /* Dynamische Skalierung anpassen */
   @media (max-width: 768px) {
     iframe {
       width: calc(100% * var(--scale)); /* Skaliere auf die dynamische Breite */
       height: auto; /* Automatische Höhe basierend auf Breite */
     }
   }
 </style>

<script>

 const iframe = document.getElementById('responsive-iframe');
 const wrapper = document.querySelector('.iframe-wrapper');

 function adjustIframeScale() {
   const viewportWidth = wrapper.offsetWidth; // Aktuelle Breite des Containers
   const iframeWidth = 1024; // Die bekannte Breite der iframe-Seite (z. B. Desktop-Version)
   
   // Berechne den Skalierungsfaktor
   const scale = viewportWidth / iframeWidth;

   // Setze den Skalierungsfaktor als CSS-Variable
   iframe.style.setProperty('--scale', scale);
   iframe.style.transform = `scale(${scale})`;

   // Passe die Höhe an, um den Inhalt vollständig sichtbar zu machen
   iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight * scale}px`;
 }

 // Initiale Anpassung, wenn die Seite geladen wird
 window.addEventListener('load', adjustIframeScale);

 // Skalierung erneut anpassen, wenn die Größe des Viewports geändert wird
 window.addEventListener('resize', adjustIframeScale);

</script>