0

以下を使用して iframe 内の Web ページを縮小します。通常の Web ページではうまく機能しますが、Web ページがモバイル Web ページ (したがって幅 320px のみ) の場合、-webkit-transform: scale( で縮小したいと思います。 0.90); 0.30 の代わりに。

<div id="iframewrap">
    <iframe id="iframeid" src="http://www.mypage.com" name="iframeName" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0" height="100%"></iframe>
</div>   


<style type="text/css"> 
#iframewrap { width: 320px; padding: 0px; top:45px; position:relative; overflow:hidden;}
#iframeid { width:320px;  height:100%; margin:10px 10px 10px 10px; overflow:hidden;}
#iframeid {
    -ms-zoom: 0.30;
    -moz-transform: scale(0.30);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.30);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.30);
    -webkit-transform-origin: 0 0;
}
</style>

iframeにロードされているページの幅を取得するために、グーグルで多くのことを試しました.iframeの幅を計算して設定します（コンテンツ幅* 0.90）

または、他に提案があれば教えてください。ありがとう。

4

1 に答える 1

0

あなたの目的を正しく理解していれば、小さな画面 (iPhone??) で縮小しすぎないようにしたいと思います。

クエリを使用@mediaしてデバイスのピクセル比を見つけ、それらのオーバーライド CSS クラスを作成できます。

簡単なグーグル検索で、@opticswerve の記事hereにたどり着きました。

編集:デバイス デバイスの最大幅の@mediaクエリを使用する場合でも、stackoverflow の質問hereに記載されているように役立ちます。

于 2012-12-03T12:53:12.010 に答える