IFrame an Device-Breite anpassen

Hallo zusammen,

ich habe eine Seite "programmiert", die mir einen iFrame darstellt.
Nun möchte ich es noch schaffen, dass der iFrame sich an die Device-Breite anpasst.
Wenn unten etwas abgeschnitten wird und man scrollen muss, ist das egal.
Ist das möglich und wenn ja, wie?

Danke vorab für eure Hilfe/Ideen!

<html>
<head>
<title>Test</title>
<link rel="shortcut icon" type="image/x-icon" href="Icon.ico">  
<meta name="apple-mobile-web-app-capable" content="yes" />  
</head>
<style>
body {
background-color: black;
text-align: center;
}
</style>
<body>
<iframe
src="https://www.bild.de"  
width="462"  
height="697"  
scrolling="no"  
frameborder="0"></iframe>  
</body>
</html>

Die Darstellung soll wie im rechen/unteren Bild sein (je nach Device).

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 669497

Url: https://administrator.de/contentid/669497

Ausgedruckt am: 14.11.2024 um 20:11 Uhr

1 Kommentar

Hallo,

hier ein Beispiel, ich denke das ist so gewollt. Aber dazu ein Hinweis: nicht jede Seite erlaubt es als Iframe eingebunden zu werden, das definiert man als Webseitenbetreiber über die Content Security und verbietet das in der Regel, ich hab mal als Beispiel wikipedia genommen, da ist es wohl erlaubt.

<!DOCTYPE html>
<html lang="de">  
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Test</title>
    <link rel="shortcut icon" type="image/x-icon" href="Icon.ico">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <style>
        body {
            background-color: black;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden; /* Prevent scrolling */
        }

        iframe {
            width: 100vw; /* Full width of the viewport */
            height: 100vh; /* Full height of the viewport */
            border: none;
        }
    </style>
</head>
<body>
    <iframe src="https://wikipedia.de" scrolling="no"></iframe>  
</body>
</html>