iframeの幅が携帯端末の縦向きに合わない

Question

私のウェブサイトのiframeに次のコードを使用しています。

.callrates { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 35px; 
 
    height: 0; 
 
    overflow: scroll !important; 
 
    -webkit-overflow-scrolling:touch !important; 
 
    height:500px; 
 
} 
 

 
.callrates iframe { 
 
    position: relative; 
 
    top:0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="callrates"> 
 
    <iframe src="https://www.xyz.php" width="200px" height="0" allowfullscreen=" " frameborder="0" scroll="no"></iframe> 
 
</div>

問題

は、私は、IFRAMEの幅は、画面サイズよりも大きい縦向きにモバイルデバイスからそれを表示したときであり、従って、それは同様に垂直に水平方向にスクロールさせます。全幅が画面に収まるようにしたい。これはどうすればいいですか？

Answer 1

チェックアウトこのcodepen：http://codepen.io/anon/pen/YpZgYmは

<iframe src="https://www.xyz.php" width="" height="0" allowfullscreen=" " frameborder="0" scroll="no"> 

更新：

が最もエレガントな解決策ではないかもしれないが、IFRAMEのソースページが応答作る場合は、iframeのコンテンツをズームアウトすることができますがオプションではありません。

てみ

iframe{ 
     -ms-zoom: 0.75; 
     -moz-transform: scale(0.75); 
     -moz-transform-origin: 0 0; 
     -o-transform: scale(0.75); 
     -o-transform-origin: 0 0; 
     -webkit-transform: scale(0.75); 
     -webkit-transform-origin: 0 0; 
}