javascript - iframe のサイズに基づいて iframe ページのズームを動的に変更する

Question

フレーム化されたページから iframe の高さと幅を検出し、それに基づいてズームを設定して、ページが iframe のコンテンツに幅 100 で収まるようにすることは可能ですか。

たとえば、最小のページがあります。幅は 960 ピクセルですが、誰かが私のページをスクロールバーなしで幅 690 ピクセルの iframe で表示したいと考えています。

それを検出し、それに基づいてコンテンツを拡大縮小して、ページ全体を表示しながら縮小縮小するにはどうすればよいでしょうか?

Answer 1

メタ概念は次のようになります。

// Check if window is inside of an iframe
if (window.self !== window.top) {
    var optimalSize = 500; // desired width of the page
    document.body.style.zoom = optimalSize / window.innerWidth;
}

もう 1 つのオプションは、メディア クエリを使用して適切なスタイルを適用することです。これがあなたの状況に最適だと思います。