私のウェブサイトをズーム10％で

Question

クライアントのためにウェブサイトのデザインを完了した後、私はすべてが少し小さいことに気づいた。ブラウザのズームを実験した結果、10％のズームが多く固定されていることがわかりました。問題は、すべてのサイズ（画像サイズ、画像サイズ、テキストサイズなど）を110％にリサイズする方法がわかりません。

アイデアをいただければ幸いです。私はCSSでこれをすべて行うことを好むでしょう。

編集 -

ハハ、OK男は、私はちょうどで行くと、実際のサイズを変更するいくつかの時間を費やしますね。私がやりたいことではありませんが、私はそれが私の本当の選択肢だと思います。みんなありがとう:)

Answer 1

これを行う正しい方法は、あなたのウェブサイトを再設計することです。正しく設計されている場合は、非常にでなければなりません。いくつかのアドバイス：

• ページ幅：子要素はがあなたが設定した絶対幅をハードコードしていない限り、スペースを埋めるために展開する必要がある幅、あなたの最も外側のコンテナの幅を増やします。そのような場合は、pxを調整してください。

• フォントサイズ：あなたはemや%値を使用している場合は、単にbodyのfont-sizeを増やす（他の要素は、このベースフォントサイズを継承します）。フォントサイズにpxを使用した場合は、フォントサイズを大きくする必要があります。

私はあなたがjavascriptやIE zoomプロパティを介したページが正しいアプローチではない「ズーム」とあなたが再設計を避けていることをダウン深く知っていると思います。 body{ transform:scale(1.1); }のようなものであっても、スケール/ストレッチ時に画像が悪く見えることがあります。CSS3ではサポートが不足しているため、after testing this ideaはビューポート/可視領域からコンテンツを拡大縮小することができます。

これを永続的に変更したい場合は、CSSを書き直すことです。

Answer 2

私は（などのフォントサイズ10pxのを設定する）他の方法で問題を解決するために、あなたをお勧めします

しかし、あなたは本当に私が私の最近の答えにあなたをreferrことを行いたい場合同様の問題。 FFはこれをサポートしていないので注意してください。なぜなら、FFはjs経由でのズームを許可していないからです！

imitate browser zoom with JavaScript

は[そこに行く：] [1]

用途：

document.body.style.zoom=1.0;this.blur(); 

1.0が100％を意味

150％は1.5千パーセントは次のようになりますでしょう10.0

this.blur（ ）は、curser（入力フィールドを選択した可能性があります）を意味し、 はすべての選択項目のフォーカスを失います。

か：

あなたはCSS3の要素[ズーム]、[2]を使用することができます（[ソース]を[3]）

[Firefoxは許可しない]のことができますので、[4]ブラウザでズーム' は、javascriptまたはsthを介してユーザーのプロパティにアクセスします。

ズーム機能（CSS3：zoom、 ）やテキストサイズを大きくすることができるCSSスタイルを使用することができます。あなたは例えば と異なるCSSファイルを含めることができます。しかし、ここではスタイルのCSS要素（浮動小数点数など）に実際に属性が異なる「 」があるため、 という問題が発生します。

Iは、上記投稿ズームChromeとIE8 +（上述のようにサポートされFFない ）でうまく機能

[1]： http://www.perlunity.de/javascript/scripts/javascript_0314_main.shtml [2]：http://www.css3.com/css-zoom/ [3]： Can I zoom into a web page like IE or Firefox do, using programming? [4]： http://www.mozilla.org/projects/security/components/signed-scripts.html

Answer 3

これは、すべての価値は、しばらくのブラウザで200％のスケールに画面上のすべてのサイズを変更：

body { 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    -o-transform: scale(2); 
    -ms-transform: scale(2); 
    transform: scale(2); 
}