【CSS】インラインフレーム内のコンテンツを縮小表示する方法

スマートフォン向けサイト作成時にiframe内のコンテンツを縮小する必要があったので、メモ程度になりますがやり方の説明です。

まずインラインフレームにコンテンツを表示させます

コードはこんな感じです

<iframe src="http://izmaker.com" height="500" width="100%"></iframe>

このiframeに下記のようなスタイルを追加します。

-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);

各レンダリングエンジンに対応させます。（）内の数値が拡大率になります。「1」を100%として以下小数点で記述します。

例えば

-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);

と設定すると・・・・・

このように50%に縮小されて表示されます。
注意点としては縮小の起点が左上では無いことでしょうか、中央揃えだと思うのですがiframeのサイズ自体が小さいと起点がズレたりします。
あとiframe自体の置きさは変わらないので、コンテンツに大きさを追従させるにはまた別の処理が必要になります。

このスタイルはスマートフォンでも利用可能です、利用用途としては例えばレスポンシブデザインを作成する際に、インラインフレームをウィンドウのサイズにキレイに追従させる等が出来ると思います。

ご参考までに