CSSでWebページ全体をスケーリングするにはどうすればよいですか？

Firefoxを使用すると、を押すだけでWebページ全体を拡大できますCTRL +。これにより、Webページ全体（フォント、画像など）が比例して拡大されます。

CSSを使用して同じ機能を複製するにはどうすればよいですか？

次のようなものはありますかpage-size: 150%（これにより、ページ全体がx％増加しますか？）

CSS zoomプロパティを使用できる可能性があります-IE 5.5以降、Opera、Safari 4、およびChromeでサポートされています

使用できます：css Zoom

Firefoxは、Zoom（bugzillaの項目）をサポートしない唯一の主要なブラウザーですが、Firefox 3.5では「独自の」-moz-transformプロパティを使用できます。

だからあなたは使うことができます：

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

これはかなり遅い答えですが、あなたは使うことができます

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

ページを110％ズームします。けれどもzoomスタイルがあり、Firefoxはまだ悲しいことに、それをサポートしていません。

また、これはズームとは少し異なります。css transform画像のズームのような作品は、それは、リフロー原因などをあなたのページを拡大しなくなります

更新された変換の原点を編集します。

場合は、あなたのCSSを完全に周りに構築されるexかemのユニット、これが可能と実現可能かもしれません。またはのfont-size: 150%スタイルで宣言する必要があります。これにより、その他すべての長さが比例してスケーリングされます。ただし、スタイルを取得しない限り、この方法で画像を拡大縮小することはできません。bodyhtml

しかし、ほとんどのサイトでとにかく、それは非常に大きなものです。

ヨハネスが言うように-彼の答えに直接コメントするのに十分な担当者ではありません-すべての要素の「寸法がフォントのサイズの倍数として指定されている限り、実際にこれを行うことができます。意味、％、em、またはexを使用したすべて単位」。％はfont-sizeではなく、含んでいる要素に基づいていると思います。

また、これらの相対単位はピクセルで構成されているので、通常は画像に使用しませんが、これをより実用的にするトリックがあります。

定義するとbody{font-size: 62.5%};、1emは10pxに相当します。私の知る限り、これはすべてのメインブラウザーで機能します。

次に、（例）100px正方形の画像を指定できます。Firefox width: 10em; height: 10em;のスケーリングがデフォルトに設定されていると仮定すると、画像は自然なサイズになります。

作成body{font-size: 125%};およびすべて-画像を含む-は元のサイズの2倍になります。

このコードを使用すると、1emまたは100％は身長の1％に等しくなります

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

これはページ上のすべての要素を変換します

ジョン・タンは、彼のサイトでこれを行っている- http://jontangerine.com/ 画像を含むすべてのものは、EMSで宣言されています。すべて。これにより、望ましい効果が得られます。テキストズームと画面ズームはほぼ同じ結果をもたらします。

CSSはオンデマンドでズームできませんが、CSSをJSと組み合わせた場合、いくつかの値を変更してページを大きく見せることができます。ただし、すでに述べたように、この機能は最近のブラウザーでは標準であり、複製する必要はありません。実際のところ、それを複製すると、Webサイトの速度が低下します（ロードするものが増える、解析または実行および適用するJSまたはCSSが増えるなど）。

CSSプロパティを使用してページ全体をスケーリングする次のコードがあります。重要なことは、body.style.widthをズームの逆に設定して、水平スクロールを回避することです。また、ドキュメントの左上をウィンドウの左上に保つには、transform-originを左上に設定する必要があります。

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }