0

私はレスポンシブ デザインに取り組んでいます。私のページには iFrame が含まれています

例 ：

    <iframe class="frame" src="www.google.com?embed=true&width=800&height=600" style="height:100%;width:100%;border:none;">
   </iframe>

iframe がレスポンシブに表示されるように、スタイルを width と height:100% として割り当てていることもわかります。

問題は、私のiframeが

    <iframe class="frame" src="www.google.com?embed=true" style="height:100%;width:100%;border:none;">
   </iframe>

iframe は、iPhone デバイスの幅に合わせて適切に調整されているようです。

高さと幅について言及すると、プロパティを定義したため、iPhoneの幅に調整されません。

私はこの方法を試しました：CSS

     @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
      .frame{
             width:320px;

             }
   }

しかし、iframe はコンテナー フレームから飛び出しています。

したがって、クラス「フレーム」のスタイルをリセットして、iPhoneに表示されているiframeが保持されるようにする方法を知りたいだけです

<iframe src="www.google.com?embed=true"></iframe>

ありがとうございました。

4

1 に答える 1

0

これを試して：

<style type="text/css">

    @media only screen and (max-width: 400px) {
        .div {
            width: 300px;
        }
    }
</style>

ここにもっとあります

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
于 2013-05-03T10:50:03.057 に答える