全ページ<iframe>

97

以下のサンプルコードがあります。これは、モバイルデバイスのブラウザを除くすべてのブラウザで正常に動作します。

オーバーフロータグが問題です。

モバイル以外のすべてで動作します：

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

コンピュータではなく、すべてのモバイルで動作します。

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

両方で動作させるための最良の方法は何ですか？

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

— レーサー
ソース

なぜリダイレクトしないのcnn.comですか？

— GolezTrol 2013

cnn.comは一例です。私が防ごうとしている行動を示すため。

— レーサー2013

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 含まれているhtmlの先頭に追加するだけで、応答性が再び（少なくとも部分的に）戻ります。

— Nukey 2015

170

これが実際のコードです。デスクトップおよびモバイルブラウザで動作します。それが役に立てば幸い。回答してくれてありがとう。

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

— レーサー
ソース

2

上にiframeを置きたいときは注意してください-Chromeに問題がありました。私はクロージングを追加しました</ iframe>と作品

— ミハル-ワルダネット'26年

iframe内のコンテンツから応答性（つまり、列の折りたたみなど）を奪っているようです。しかし、どういうわけかモバイルサファリでページを開いたときだけで、デスクトップブラウザのサイズを変更したときではありません。その行動を引き起こす可能性のあるアイデアはありますか？

— psteinweber 2015年

3

@psteinweber、それ<meta content='width=device-width, initial-scale=1.0' name='viewport'>を含むページに追加する必要があるだけです。

— jfeust

for およびpropertiesのvw代わりに使用して、Chromium 81で適切に配置する必要がありました。それ以外の場合は、魅力のように機能します。%widthheight

— Josh Habdas

18

これはクロスブラウザであり、完全に応答します：

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

— タウシフトラビ
ソース

7

これをCSSに入れます。

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

— ショーリワショーンベンジャミン
ソース

3

これは私が過去に使用したものです。

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

またiframe、次のスタイルを追加します

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

— ジェイ・パテル
ソース

返信ありがとうございます。しかし、それは基本的に私が持っているものなので、機能しません。モバイルブラウザーでは、オーバーフローしてスクロールできないものはすべて遮断されます。

— レーサー2013

@Lacer置き換えoverflow: hiddenてみてくださいoverflow: auto

— Jay Patel

やってみましたモバイルブラウザーではまだ切り取られ、デスクトップブラウザーでは二重スクロールが発生します

— Lacer

いいえ、まだデスクトップブラウザでのダブルスクロールとモバイルブラウザでの中断

— Lacer

2

全画面表示のフレームリダイレクトと同様のものには、2つの方法があります。どちらもモバイルとデスクトップで正常に動作します。

これは完全なクロスブラウザで動作する有効なHTMLファイルであることに注意してください。変更titleしsrcて、ニーズに合わせてください。非ASCII文字がない場合
は、ドロップすることを検討し<meta charset>てください。

1.これは私のお気に入りです：

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

または2.そのようなもの、少し短い：

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

注：
上記の例は控えめにするために使用height:100vhしていません。古いブラウザはそれを認識していないため（最近の話題でheight:100vhはないかもしれません）、height:100%モバイルブラウザと必ずしも同じではないためです（おそらくここでは適用されません）。それ以外の場合はvh、少し物事を簡素化するので、

3.これはvhを使用した例です（私のお気に入りではなく、互換性が低く、利点がほとんどありません）

<!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
ソース