Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 8: | Zeile 8: | ||
<h1>Variante: responsiv</h1> | <h1>Variante: responsiv</h1> | ||
<style> | <style> | ||
body { | body { | ||
margin: 0; | margin: 0; | ||
Zeile 15: | Zeile 15: | ||
} | } | ||
.iframe- | .iframe-wrapper { | ||
width: | width: 100vw; /* Volle Breite des Viewports */ | ||
height: 100vh; /* Volle Höhe des Viewports */ | |||
overflow: hidden; /* Überschüssige Inhalte ausblenden */ | overflow: hidden; /* Überschüssige Inhalte ausblenden */ | ||
position: relative; /* Container für absolutes Positionieren */ | |||
} | } | ||
Zeile 26: | Zeile 26: | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
width: | width: 100%; /* Standardbreite */ | ||
height: | height: 100%; /* Standardhöhe */ | ||
transform-origin: top left; /* Skalierung | transform-origin: top left; /* Skalierung ab der oberen linken Ecke */ | ||
transform: scale(1); /* Standard-Skalierung */ | |||
} | } | ||
Zeile 34: | Zeile 35: | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
iframe { | iframe { | ||
transform: scale(0. | transform: scale(0.8); /* Skaliere das iframe-Inhalte */ | ||
width: 125%; /* Kompensiere die Skalierung, um die Breite zu erhalten */ | |||
height: 125%; /* Gleiche Relation wie Breite */ | |||
} | } | ||
} | } | ||
Zeile 40: | Zeile 43: | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
iframe { | iframe { | ||
transform: scale(0. | transform: scale(0.7); /* Noch stärkere Skalierung */ | ||
width: 143%; /* Entsprechend der Skalierung erhöhen */ | |||
height: 143%; /* Höhe bleibt proportional */ | |||
} | } | ||
} | } |
Version vom 15. Januar 2025, 20:47 Uhr
Variante: Aufruf von GOV mit Iframe und "show"
Variante: responsiv
<style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
.iframe-wrapper { width: 100vw; /* Volle Breite des Viewports */ height: 100vh; /* Volle Höhe des Viewports */ overflow: hidden; /* Überschüssige Inhalte ausblenden */ position: relative; /* Container für absolutes Positionieren */ }
iframe { position: absolute; top: 0; left: 0; width: 100%; /* Standardbreite */ height: 100%; /* Standardhöhe */ transform-origin: top left; /* Skalierung ab der oberen linken Ecke */ transform: scale(1); /* Standard-Skalierung */ }
/* Media Queries für kleinere Bildschirme */ @media (max-width: 768px) { iframe { transform: scale(0.8); /* Skaliere das iframe-Inhalte */ width: 125%; /* Kompensiere die Skalierung, um die Breite zu erhalten */ height: 125%; /* Gleiche Relation wie Breite */ } }
@media (max-width: 480px) { iframe { transform: scale(0.7); /* Noch stärkere Skalierung */ width: 143%; /* Entsprechend der Skalierung erhöhen */ height: 143%; /* Höhe bleibt proportional */ } } </style>