Pagina intera <iframe>

97

Ho il codice di esempio qui sotto. Funziona bene con tutti i browser tranne i browser sui dispositivi mobili.

Il tag di overflow è il problema.

Funziona con tutti tranne che per i dispositivi mobili:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Funziona con tutti i cellulari e non con i computer:

margin: 0; padding: 0; height: 100%;

Qual è il modo migliore per farlo funzionare su entrambi?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>

html css iframe

— Lacer
fonte

Perché non reindirizzare solo a cnn.com?

— GolezTrol

cnn.com è più un esempio. per mostrare il comportamento che sto cercando di prevenire.

— Lacer

basta aggiungere <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in testa all'html che lo contiene e la reattività torna di nuovo (almeno in parte).

— Nukey

171

Ecco il codice funzionante. Funziona con browser desktop e mobili. spero che sia d'aiuto. grazie per tutti coloro che hanno risposto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>

— Lacer
fonte

2

attenzione, quando volevo mettere un iframe sopra, c'era un problema in Chrome. Ho aggiunto la chiusura </iframe> e funziona

— Michal - wereda-net il

Sembra che stia eliminando la reattività (cioè la compressione delle colonne e così via) dal contenuto all'interno dell'iframe. Ma in qualche modo solo quando si apre la pagina con Safari mobile, non quando si ridimensiona un browser desktop. Qualche idea su cosa potrebbe causare quel comportamento?

— psteinweber

3

@psteinweber, devi solo aggiungere <meta content='width=device-width, initial-scale=1.0' name='viewport'>alla pagina contenitore.

— solo il

Ho dovuto usare al vwposto di %for widthe height properties per ottenere il corretto allineamento in Chromium 81. Altrimenti funziona a meraviglia.

— Josh Habdas

19

Questo è cross-browser e completamente reattivo:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>

— tawsif torabi
fonte

7

Mettilo nel tuo CSS.

iframe {
  width: 100%;
  height: 100vh;
}

— shoriwa-shaun-benjamin
fonte

3

Questo è quello che ho usato in passato.

html, body {
  height: 100%;
  overflow: auto;
}

Anche iframenell'aggiungere il seguente stile

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

— Jay Patel
fonte

grazie per la risposta ma è essenzialmente quello che ho quindi non funziona. Sul browser mobile interrompe tutto ciò che è in overflow e non ti consente di scorrere.

— Lacer

@Lacer Prova a sostituire overflow: hiddenconoverflow: auto

— Jay Patel

l'ho provato. sul browser mobile lo interrompe ancora e sui browser desktop provoca doppi scroll

— Lacer

no ancora il doppio scorrimento nel browser desktop e si interrompe sui browser mobili

— Lacer

2

Per i reindirizzamenti di frame a schermo intero e cose simili ho due metodi. Entrambi funzionano bene su dispositivi mobili e desktop.

Nota che questi sono file HTML validi e funzionanti su più browser. Basta cambiare titlee srcper le tue esigenze.
Puoi considerare di lasciarlo cadere <meta charset>se non hai caratteri non ASCII.

1. questo è il mio preferito:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

o 2. qualcosa del genere , leggermente più corto:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

Nota :
per essere prudenti, gli esempi precedenti evitano di utilizzarli height:100vhperché i vecchi browser non lo conoscono (forse è discutibile in questi giorni) e height:100vhnon è sempre uguale a height:100%sui browser mobili (probabilmente non applicabile qui). Altrimenti, vhsemplifica un po 'le cose, quindi

3. questo è un esempio che usa vh (non il mio preferito, meno compatibile con poco vantaggio)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>

— jj
fonte