web-dev-qa-db-ja.com

iOS SafariでIFrameをレスポンシブにする方法

問題は、Webサイトにコンテンツを挿入するためにIFrameを使用しなければならない場合、現代のWebの世界では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>

Content.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でも問題なく動作します。あなたは何の問題もなく風景と肖像画を変えることができます。

enter image description hereenter image description here

ただし、これを追加してContent.htmlCSSを変更するだけです。

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

あなたはこれを得ます:

enter image description hereenter image description here

ご覧のとおり、Content.htmlコンテンツは完全にレスポンシブですが(div#ScrolledAreaoverflow: scrollが設定されています)、iframeはwidthが100%の場合、iframeはオーバーフローが存在しない場合と同じように、div#ScrolledAreaの全幅を使用します。 デモ

このような場合、iframecontentにスクロール領域があるとしたら、iframeコンテンツに水平方向のスクロール領域があるときにiframeをレスポンシブにする方法はどうなりますか。ここでの問題は、Content.htmlが応答しないという事実ではなく、iOS Safariが単にdiv#ScrolledAreaが完全に見えるようにiframeのサイズを変更するという事実です。

121
Idra

この問題の解決策は実際には非常に簡単であり、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を気にしない場合は省略できます。 デモ

enter image description hereenter image description here

ご覧のとおり、div#ScrolledAreaの幅は実際には100%であり、overflow: scroll;はそれを実現し、あふれているコンテンツを隠すことができます。 iframeコンテンツにアクセスできる場合、これが望ましいです。

ただし、iframeコンテンツにアクセスできない場合(何らかの理由で)、iframe自体で同じ手法を実際に使用できます。 iframeで同じCSSを使用するだけです:

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

ただし、これには1つの制限があります。これを機能させるには、iframeでscrolling="no"を使用してスクロールバーをオフにする必要があります。

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

スクロールバーが許可されている場合、これはiframeで動作しなくなります。ただし、Content.htmlを変更すると、iframeでスクロールを保持できます。 デモ

272
Idra

問題は、Mobile Safariに含まれるドキュメントが指定したものよりも幅が広い場合、Mobile SafariがiFrameの幅に従うことを拒否することです。例:

http://jsbin.com/hapituto/1

デスクトップブラウザでは、iFrameとDivがどちらも300pxに設定されています。内容が広くなっているので、iFrameをスクロールできます。

ただし、モバイルサファリでは、iFrameはコンテンツの幅に合わせて自動拡張されます。

私の推測では、これはページ内のスクロールコンテンツに関する長年の問題に対する回避策です。以前は、タッチデバイスで大きなスクロールiframeを使用していた場合は、ページ自体ではなくスクロールするため、iframe内で「動けなくなる」ことがありました。 AppleはiFrameのデフォルトの振る舞いを「スクロールしない」と決め、それを防ぐために拡張したようです。

1つの選択肢はこの回避策です。 iFrameがスクロールすると想定する代わりに、自分が制御できるDIVにiframeを配置し、そのスクロールを可能にします。

例: http://jsbin.com/zakedaja/1

マークアップの例:

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

モバイルサファリでは、フル展開されたiFrameの内容を、それを含むdivを介してスクロールできるようになりました。

キャッチ:デスクトップブラウザでは、スクロールバーが二重になっているので、これは本当に見苦しい感じです。そのため、これを回避するには、JSを使用してブラウザを検出する必要があります。

22
DA.

クロスブラウザソリューションが必要でした。要件は以下のとおりです。

  • iOSとそれ以外の場所の両方で作業する必要がある
  • iFrameのコンテンツにアクセスできない
  • スクロールする必要があります。

私が学んだことを土台にして @ Idra iOSではスクロール= "いいえ"、そして この記事 iOSのiFrameコンテンツを画面に合わせることについては、ここで私がやめたものです。それが誰かに役立つことを願っています=)

HTML

<div id="url-wrapper"></div>

CSS

html, body{
    height: 100%;
}

#url-wrapper{
    margin-top: 51px;
    height: 100%;
}

#url-wrapper iframe{
    height: 100%;
    width: 100%;
}

#url-wrapper.ios{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
    height: 100%;
}

#url-wrapper.ios iframe{
    height: 100%;
    min-width: 100%;
    width: 100px;
    *width: 100%;
}

JS

function create_iframe(url){

    var wrapper = jQuery('#url-wrapper');

    if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
        wrapper.addClass('ios');
        var scrolling = 'no';
    }else{
        var scrolling = 'yes';
    }

    jQuery('<iframe>', {
        src: url,
        id:  'url',
        frameborder: 0,
        scrolling: scrolling
    }).appendTo(wrapper);

}
15
gerbz

これらすべての解決策の問題点は、iframeの高さが実際には変わらないことです。

これは、iframe自体はスクロールしないため、Javascript、position:fixed;、またはposition:absolute;を使用してiframe内の要素を中央に配置することはできないことを意味します。

私の解決策 詳細はこちら iframeのすべてのコンテンツをこのCSSを使用してdiv内にラップすることです。

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

このようにして、Safariはコンテンツに高さがないと考え、iframeの高さを適切に割り当てることができます。これはまたあなたが望む任意の方法で要素を配置することを可能にします。

ここで、すばやく汚いデモを見ることができます。

10
Pier

イオン2で作業していて、システム構成は以下の通りです -


******************************************************

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68



******************************************************

私にとって、この問題はこのコードで解決されました
HTML iframeタグの場合は -

<div class="iframe_container">
      <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
        <!--  <img src="img/video-icon.png"> -->
      </iframe><br>
   </div>

同じのCSSを参照してください -


.iframe_container {
  overflow: auto; 
  position: relative; 
  -webkit-overflow-scrolling: touch;
  height: 75%;
}

iframe {
  position:relative;
  top: 2%;
  left: 5%;
  border: 0 !important;
  width: 90%;
}

私の場合、ポジション資産が重要な役割を果たします。
位置:相対;

それもあなたを助けるかもしれません!

3
S.Yadav

この問題はiOS Chromeにもあります。

私の場合、私は上記のすべての解決策をざっと見た私が必要でした、ほとんどは非常にハッキーです。

古いブラウザをサポートする必要がない場合は、iframeの幅を100vwに設定してください。 iframe { max-width: 100%; /* Limits width to 100% of container */ width: 100vw; /* Sets width to 100% of the viewport width while respecting the max-width above */ }

注:ビューポートユニットのサポートを確認してください https://caniuse.com/#feat=viewport-units

1

実際に私のためにちょうどスクロールを無効にするIOSで働いた

<iframe src="//www.youraddress.com/" scrolling="no"></iframe>

そしてスクリプトを介してOSを処理します。

0
Luiz Rossi

私にとって、CSSソリューションは機能しませんでした。しかし、プログラムで幅を設定すると、仕事ができます。 iframeのロード時に、プログラムで幅を設定します。

 $('iframe').width('100%');
0
umer

CSSのみのソリューション

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

別の デモはこちら iframe内のHTMLページ

0
4dgaurav

私はiframeの水平スクロールバーを作成するコンテンツペインの幅に問題がありました。イメージの幅が予想よりも広くなっていることがわかりました。私はすべての画像CSS最大幅をパーセントに設定することによってそれを解決することができました。

<meta name="viewport" content="width=device-width, initial-scale=1" />

img {
        max-width: 100%;
        height:auto;
    }
0