携帯電話向けの対応iframe

携帯機器でiframeを使用するにはかなり問題があります。画面の半分以上しかカバーしていません。私はそれが私のiframeに入れたCSSのいくつかの行のためだと思う。携帯電話向けの対応iframe

.Wrapper2 { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.Wrapper2 iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

私も私のテキストのためにそれを追加したい

、私は、ビューポートのサイズを使用しています（VW、VH、VMIN、VMAX）私も文章の長いブロックの問題を取得していますと、それは任意の助けになるならばスクロールバーを生成します。私はまた、私のiframeのCSSやテキストサイジングで何かをしなければならないかもしれないと思います（???）。私が実装する必要がある変更は何でしょうか？前もって感謝します！

出典

2017-03-28 Paul Nadera

ここで十分なコードがないので、問題を示すフィドルを提供するかもしれませんが、私が推測しなければならない場合は、セレクタに 'display'型を設定したり、あなたの '.Wrapper2'に' width'を追加しましたが、もっと多くのコードを見ることなく、伝えにくいと言いました。 – Slime

私たちが問題の原因を理解しやすくするために、htmlを投稿してください。

はこれを試してみてください - あなたがHTMLであなたはiframeに見れば、あなたは見つけることができます：

<iframe width="560" height="315" src="https://www.youtube.com/embed/HDI9inno86U" frameborder="0" allowfullscreen></iframe>

ので、すでにiframe要素内で定義された幅&高さがあります。あなたがしなければならないのは、それをwidth="100%"に変更するだけです。

出典

2017-03-28 12:57:14

これは必ずしも当てはまりません。 – Roberrrt

携帯電話向けの対応iframe

答えて

関連する問題