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/forum/iframe-an-device-breite-anpassen-669497.html

Ausgedruckt am: 22.12.2024 um 03:12 Uhr

4 Kommentare

Neuester 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>

Leider nein, deine Seite sieht ja komplett aus wie Wikipedia.
Ich möchte einfach nur, dass der iFrame auf die Device-Breite gezoomt wird.
Alternativ einfach mit einem festen Wert gezoomt wird.
Im Browser bekomme ich das mit "zoom: 2;", aber auf den mobilen Devices greift das nicht.

Das schwarze drumherum soll ruhig bleiben.

Guten Morgen,

du kannst komplett mit den Werten, width und heigth im iframe spielen, um zu schauen was passt im Beispiel 1.

Wenn du stattdessen in einen iframe zoomst statt die Seite dem Viewport anzupassen, kann es sein, dass du etwas abschneidest siehe Beispiel 2 nochmal an Hand von deinem Originial, wenn dir das so ausreicht kannst du in Beispiel 2 den Zoom Wert in Zeile 2 anpassen. Zudem ist die width im iFrame auf 100% statt Pixelwerte gewechselt.

Responsive ist das aber nicht.
1:

<!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: top;
            height: 100vh;
            overflow: hidden; /* Prevent scrolling */
        }

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

<!DOCTYPE html>
<html lang=de style="zoom:1.2">  
<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.wikipedia.de"    
width="100%"    
height="697"    
scrolling="no"    
frameborder="0"></iframe>    
</body>
</html>

Das kommt der Darstellung schon näher, aber ist immer noch nicht das was ich möchte.

Der Inhalt des iFrames ist eine Excel-Tabelle, die eine exakte Größe hat.
Ich möchte es erreichen, dass nur die Tabelle im Browser dargestellt wird und nicht mehr aus der Excel-Tabelle.
Daher hilft es mir nicht, wenn sich der Frame-Rahmen vergrößert, aber der Inhalt des Frames nicht.

Ich habe eine Beispiel-Datei im OneDrive erstellt, schicke dir gleich im Chat mal den Link.
Dann wird das evtl. verständlicher, was ich erreichen möchte.

Diese Tabelle/Frame soll sich dann immer der Device/Browser-Breite anpassen.
Das bekomme ich nicht hin, aber vielleicht geht das auch gar nicht.

Frage HTML Webbrowser

Mehr von sv1990en

PDF mit PDF24 zusammenführensv1990en - 3 Kommentare

E-Rechnung mit Microsoft Officesv1990en - 8 Kommentare

Geburtstage von Kontakten in Google-Kalender wegsv1990en - 11 Kommentare

Fehler beim Öffnen freigegebener OneDrive-Dateisv1990en - 4 Kommentare

Heiß diskutiert