Tam Sayfa <iframe>

Question 1

Aşağıdaki örnek koda sahibim. Bu, mobil cihazlardaki tarayıcılar dışında tüm tarayıcılarda sorunsuz çalışır.

Sorun taşma etiketi.

Mobil dışında herkesle çalışır:

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

Bilgisayarlarla değil tüm mobil cihazlarla çalışır:

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

Her ikisinde de çalışmasını sağlamanın en iyi yolu nedir?

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

Question 2

İşte çalışma kodu. Masaüstü ve mobil tarayıcılarda çalışır. Umarım yardımcı olur. cevap veren herkes için teşekkürler.

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

Question 3

Bu, tarayıcılar arasıdır ve tamamen duyarlıdır:

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

Question 4

Bunu CSS'nize yerleştirin.

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

Question 5

Geçmişte kullandığım şey bu.

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

Ayrıca iframeaşağıdaki stili ekleyin

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

Question 6

Tam ekran çerçeve yönlendirmeleri ve benzer şeyler için iki yöntemim var. Her ikisi de mobil ve masaüstünde iyi çalışıyor.

Bunun tarayıcılar arası tam bir çalışma, geçerli HTML dosyaları olduğunu unutmayın. Sadece değiştirin titleve srcihtiyaçlarınız için. ASCII olmayan karakterleriniz yoksa
bırakmayı düşünebilirsiniz <meta charset>.

1. bu benim favorim:

<!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% } -->

veya 2. bunun gibi bir şey , biraz daha kısa:

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

Not :
İhtiyatlı olmak gerekirse, yukarıdaki örnekler kullanmaktan kaçının height:100vhçünkü eski tarayıcılar bunu bilmiyor (belki bu günlerde tartışılıyor) ve height:100vhher zaman height:100%mobil tarayıcılarla aynı değil (muhtemelen burada geçerli değil). Aksi takdirde, vhişleri biraz basitleştirir.

3. Bu vh kullanan bir örnektir (benim favorim değil, az avantajla daha az uyumlu)

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