web-dev-qa-db-ja.com

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

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

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

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

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