Ankündigung

Einklappen
Keine Ankündigung bisher.

Viewport und iframe von 100% auf Mobilgerät im Portrait-Modus

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Viewport und iframe von 100% auf Mobilgerät im Portrait-Modus

    Hallo,
    ich bin auf der Suche nach einem Problem für ein Responsive Design. Eigentlich relativ einfach - jedoch fallen mir keine Ideen mehr ein.

    Ich würde gerne ein iframe mit einer Höhe von 100% auf meinem Galaxy S20+ darstellen wollen.
    Jedoch wird die Seite mit:
    HTML-Code:
    <meta name="viewport" content="width=device-width,initial-scale=1,height=device-height">
    initialisiert.

    Somit wird leider im Portrait Modus nur der halbe Bildschirm gefüllt. Hat jemand vielleicht eine Idee, wie ich den iframe auf 100% bekomme?

    Als CSS verwende ich Folgendes:
    HTML-Code:
    #detail_frame {
    position:absolute;
    min-width: 520px;
    width: 100%;
    min-height:100vh;
    height:100vh;
    height:100%;
    top: 60; right: 0; bottom: 0; left: 10;
    }
    Vielen Dank!

  • #2
    Mit deinem CSS füllt der iFrame bei mir die Höhe des Browserfensters aus. Allerdings habe ich es nicht mit dem Handy getestet sondern nur mit der Simulation im HTML-Inspektor.
    Du hast jedoch Fehler im CSS: top, left etc. brauchen eine Maßeinheit wenn sie ungleich 0 sind also z. B. left:10px;

    Versuche dieses CSS:
    HTML-Code:
            html,
            body {
                height: 100%;
            }
            body {
                margin: 0;
            }
            #detail_frame {
                width: 100%;
                height: 100%;
            }

    Kommentar


    • #3
      Hi...

      In deinem CSS hast du in einigen Zeilen ja bereits alle Varianten durchgespielt *lol*
      Da CSS aber 'up-side-down' gelesen wird überschreibt eine nachfolgende Zeile die vorherige Zeile.
      Heißt: dein '100vh' wird sofort vom folgenden '100%' wieder erschlagen.

      iframes sind eigentlich immer viewport-relativ. Daher sollte 100vh hier richtig sein
      (ohne es sofort wieder zu überschreiben *lol*)



      <meta name="viewport" content="width=device-width,initial-scale=1">
      Lass das height-Gedöns weg !!! Er holt sich da die 'Device'-Höhe, hat nichts mit viewport-Höhe zu tun...


      html, body {
      height: 100vh;
      }

      body {
      margin: 0;
      }

      #detail_frame {
      padding 0;
      width: 100vw;
      height: 100vh;
      }

      PS: Klick mal bei deinem Browser die Taste F12. Dann siehst du welche CSS-Anweisung auch tatsächlich
      beim entsprechendem Element ankommt und angewandt wird...

      Ist nur ein Versuch. Habe es hier nicht 'nachgebaut'...

      Kommentar

      homepage-forum.de - Hilfe für Webmaster! Statistiken

      Einklappen

      Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
      Willkommen an unser neuestes Mitglied, Fohlenfan.

      Online-Benutzer

      Einklappen

      192 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 188.

      Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X