web-dev-qa-db-ja.com

Javascript / CSS：iframeのズームレベルを設定しますか？

異なるページを表示する複数のiframeを備えたページを作成したいと思います。一種の「複数のページを並べて閲覧する」タイプのものです。問題は、そうすることで、ビューポートがかなり小さくなり、各ページの左上隅しか表示されないことです。

ページ全体が表示されるように、Firefoxのズームアウト（ctrl-minus）を効果的に数回実行するようにiframeを設定する方法はありますか？基本的にページがどのように見えるかがわかる場合にのみ、テキストが読みやすいかどうかは特に気にしません。

私はこれをクロスブラウザにする必要はありません（私の目的では、最新のFirefoxでのみ機能する必要があります）が、これを必要とし、この質問に遭遇する他の人にとっては、明らかにクロスブラウザソリューションが望ましいでしょう。

javascriptcssiframezoom
28
Mala

Css変換をiframeに適用できます。

iframe {
    -moz-transform: scale(0.25, 0.25); 
    -webkit-transform: scale(0.25, 0.25); 
    -o-transform: scale(0.25, 0.25);
    -ms-transform: scale(0.25, 0.25);
    transform: scale(0.25, 0.25); 
    -moz-transform-Origin: top left;
    -webkit-transform-Origin: top left;
    -o-transform-Origin: top left;
    -ms-transform-Origin: top left;
    transform-Origin: top left;
    border: solid #ccc 10px;
}

http://jsfiddle.net/6QMcX/

変換Originプロパティを使用すると、位置を変更せずにスケーリングできます。

これは、Webkit、Opera、FF、およびIE9（未テスト）で機能します。テキストは見栄えがよく、非常に小さいサイズでも読みやすくなっています。

47
methodofaction

私はこのような適切な結果を得ました（Chromiumでのみテスト済み）：

CSS：

<style>
#iframe {
    -moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
    -webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
    -o-transform: scale(0.25, 0.25) translate(-150%, -150%);
    transform: scale(0.25, 0.25) translate(-150%, -150%);
}
#wrapper {
    width: 256px;
    height: 230px;
}
</style>

HTML：

<div id="wrapper">
    <iframe id="iframe" width="1024" height="920" scrollbars="no"></iframe>
</div>

多分これは役に立ちます。

3
Magentron