iframeはiOS専用デバイスでは反応しません

Question

これに別の目が必要かもしれませんが、見つからないものは見つからない場合があります。現在のところ、iframeの幅はBoostrap 12 colを超え、CSSは応答性を保つために設定されています。私が作っているサイトをテストすると、すべてのデスクトップブラウザで正常に動作します。私はChromeとSafariの両方でシミュレーションしていましたが、うまく動作します。しかし、Githubに投稿されると、ページは同じように動作しません。

あなたのブートストラップは、サイトの残りの部分で100％反応します。すべてが列にとどまり、適応します。ページを読み込んでも、スクロールするまでiframeに気づかないでください。しかし、Jumbotron、Navbarなどは大丈夫です。私は必要に応じてこれをトップに持っています。

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

これはiframeの設定です。私の厄介なDIVセットアップを気にしないでください。私は同じクラスの複数のクラス名の代わりに ""を好む場合があります。

<div class="container"> 
    <div class="row"> 
    <div class="menu"> 
     <div class="col-xs-12"> 
      <iframe class="menuwindow embed-responsive-item" src="https://docs.linkhere"></iframe> 
     </div> 
    </div> 
    </div> 
</div> 

そして、ここで私は私が働いている人を傷付け

.menuwindow { 
margin-top: 10rem; 
margin-bottom: 10rem; 
height: 400px; 
width: 1px; 
min-width: 100%; 
*width: 100%; 

は申し訳ありませんが、そのフレームのためのHTMLをサポートしているのCSSです。

これは、デベロッパーのブラウザでよく見える画像です。ここで

iOSデバイス上のそれの写真です。もう一つは、右側に余白がないため、コンテナから飛び出すことさえありません。

更新：私はクラスの代わりにiframeだけに焦点を当てようとしましたが、それでも問題は解決しません。あなたはIFRAME原点を編集することはできませんと仮定

Answer 1

、あなたはビューポートよりも小さいものにiframe幅を設定し、それを上書きすることができます。

だから、私たちは、この

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