BinaryDevelop
  1. ホーム
  2. html

[解決済み] iOSのSafariでIFrameをレスポンシブにするには？

2022-05-24 06:05:03

質問

問題は、ウェブサイトにコンテンツを挿入するために IFrame を使用しなければならないとき、現代のウェブの世界では IFrame が同様にレスポンシブであることが期待されていることです。理論的には簡単で、単にアイダーの使用する <iframe width="100%"></iframe> を使用するか、CSS の幅を iframe { width: 100%; } といった具合に、実際にはそれほど簡単ではありませんが、可能性はあります。

もし iframe のコンテンツが完全にレスポンシブで、内部のスクロールバーなしでサイズを変更できる場合、iOS Safari はそのサイズに合わせて iframe のサイズを変更しますが、特に問題はありません。

次のようなコードを考えてみると 

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Iframe Isolation Test 13.17</h1>
    <div id="Main">
        <iframe height="950" width="100%" src="Content.html"></iframe>
    </div>
</body>
</html>

を使うと コンテンツ.html : 

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test - Content</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            width: 100%;
            background: #ccc;
        }

    </style>
</head>
<body>
    <div id="Main">
        <div id="ScrolledArea">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique. 
        </div>      
    </div>
</body>
</html>

すると、これがiOS 7.1のSafariで問題なく動作するようになりました。横向きと縦向きを問題なく切り替えられます。

しかし、単に コンテンツ.html CSSにこれを追加することで 

    #ScrolledArea {
        width: 100%;
        overflow: scroll;
        white-space: nowrap;
        background: #ff0000;
    }

こうなる

ご覧のように コンテンツ.html のコンテンツは完全にレスポンシブであるにもかかわらず ( div#ScrolledArea は overflow: scroll が設定されている場合、iframe の幅は 100% で、iframe はまだ div#ScrolledArea の幅をフルに使ってしまいます。 デモ

このような場合 iframe のコンテンツにスクロール領域がある場合、問題は、どのようにして iframe をレスポンシブにするにはどうすればよいでしょうか？ここでの問題は コンテンツ.html がレスポンシブでないことではなく、iOS Safari が iframe のサイズを単純に変更するため div#ScrolledArea が完全に表示されるように、iOS の Safari は単純に iframe をサイズ変更します。

どのように解決するのですか？

この問題の解決方法は、実はとても簡単で、2つの方法があります。もし、あなたが content.html を制御できるのであれば、単に div#ScrolledArea の幅のCSSを変更します。 

width: 1px;
min-width: 100%;
*width: 100%;

基本的にここでの考え方は単純です。 width をビューポート（この場合は iframe の幅）より小さいものに設定し、それを min-width: 100% で上書きし、実際の width: 100% で、iOS Safari はデフォルトでこれを上書きします。そのため *width: 100%; は IE6 との互換性を保つために存在しますが、IE6 を気にしないのであれば省略してもかまいません。 デモ

これでお分かりのように div#ScrolledArea の幅は実際には 100% であり overflow: scroll; はその役割を果たし、はみ出したコンテンツを隠すことができます。iframeのコンテンツにアクセスできるのであれば、この方法が望ましいでしょう。

しかし、iframeのコンテンツにアクセスできない場合（理由はどうあれ）、実はiframe自体にも同じテクニックを使うことができるのです。単に同じCSSをiframeに使用するだけです。 

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

ただし、これにはひとつだけ制限があります。 scrolling="no" でスクロールバーをオフにする必要があります。 

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

スクロールバーが許可されている場合、これはもうiframe上では動作しません。とはいえ、もしあなたが コンテンツ.html を修正すれば、iframe でのスクロールを維持することができます。 デモ

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します