web-dev-qa-db-ja.com

CSSでWebページ全体を拡大縮小するにはどうすればよいですか？

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

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

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

htmlcssresize
130
TimH

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

使用できます：css Zoom

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

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

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-Origin: 0 0;
}
170
Jon Galloway

これはかなり遅い答えですが、使用できます

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

ページを110％ズームします。 zoomスタイルがありますが、Firefoxは残念ながらまだサポートしていません。

また、これはズームとは少し異なります。 css transformは画像ズームのように機能するため、ページを拡大しますが、リフローなどは発生しません。

編集変換元を更新しました。

59
kumar_harsh

If CSSがexまたはem単位で完全に構築されている場合、これは可能かつ実行可能です。 bodyまたはhtmlのスタイルでfont-size: 150%を宣言するだけです。これにより、他のすべての長さが比例してスケーリングされるはずです。ただし、スタイルを取得しない限り、この方法で画像を拡大縮小することはできません。

とにかく、それは非常に大きなifです。

17
Joey

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

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

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

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

body{font-size: 125%};およびすべて（イメージを含む）を元のサイズの2倍にします。

5
e100

このコードでは、1emまたは100％が身長の1％に等しくなります

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
3
Cedric Austen-Brown

Jon Tanは彼のサイトでこれを行っています- http://jontangerine.com/ 画像を含むすべてがemsで宣言されています。すべて。これは、望ましい効果が達成される方法です。テキストズームとスクリーンズームは、ほぼ同じ結果をもたらします。

1
Andy Ford

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

1
T0xicCode
 * {
transform: scale(1.1, 1.1)
}

これにより、ページ上のすべての要素が変換されます

0
Rushabh Sooni