デバイス画面内に横向きのiFrameコンテンツを挿入する方法

Question

iFrameを配置した携帯端末に横向きに設定したウェブページがあります。私の問題は、横向き（デバイスの画面に一致する全幅と高さ）の間、モバイルデバイスの画面に収まるようにiframeを取得できないことです。どのように私はこれを達成することができますか？私はCSSを使用しています

：

<style> 
    body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: hidden; 
    } 

    #content { 
    position:absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 0 
    } 

    #content iframe{ 
    width:100%; 
    height:100%; 
    border:none; 
    } 

    @media screen and (orientation:portrait) { 
     body { 
     -webkit-transform: rotate(-90deg); 
     -webkit-transform-origin: 50% 50%; 
     transform: rotate(-90deg); 
     transform-origin: 50% 50%; 

      } 
    } 
    </style> 

そしてHTML：私はあなたがそれを回転させる前に、サイズが計算されていることを、私のコメントの問題はあるに述べたように

<div id="content"> 
    <iframe src="localhost/iframeTest/index.php" 
     allowtransparency="true" frameborder="0" scrolling="no" 
     class="wistia_embed" name="wistia_embed" allowfullscreen 
     mozallowfullscreen webkitallowfullscreen oallowfullscreen 
     msallowfullscreen width="100%" height="100%"></iframe> 
</div> 

Answer 1

。これを修正するには、vh, vwサイズを使用し、高さにはvw、幅にはvhを使用します。次に、それを回転させてビューポートに戻すことができます。

body { 
    display: block; 
    width: 100vh; 
    height: 100vw; 
    transform: translateY(100vh) rotate(-90deg); 
    transform-origin: top left; 
} 

それが働いを確認し、このcodepen：https://codepen.io/pixelarbeit/pen/rpLbNe