web-dev-qa-db-ja.com

ページの読み込み時にブラウザのズームレベルを上げる方法は？

ページの読み込み時にブラウザのズームレベルを上げる方法は？

これは私の webリンク 最近、FirefoxがCtrl +を押してブラウザのズームレベルが上がるように、すべてのブラウザでこれを自動的に行う方法があるように、幅を増やすタスクがありましたページの読み込み。

javascripthtmlcsshtml5
46
Danish Iqbal

個人的には、これは悪い考えだと思います。簡単にスケーリングできるようにサイトを設計するか（適切なCSS/HTMLテクニックでは難しくありません）、またはユーザーが望みどおりに実行できるようにします（既にブラウザーをズームしているか、低解像度を使用している場合があります）。通常、人々のためにUXを決定するべきではありません。

しかし、それは可能です。

デモ： http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-Origin: 0 0;
}

この回答の以前のバージョンでは、transformを使用して、より多くのブラウザーをサポートしていました。ただし、この短縮コードは、Chrome、FF、Safari、およびIEの現在のバージョン（およびzoomを長い間サポートしていたIEの以前のバージョン）で機能するようです。

54
Tim Medora

これを試して：

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>
16
Vinod

CSS zoomルールを試すことができます。私は実際にそれを試したことはありませんが、理論的には次のようなCSSルールを設定すると、あなたが望むことをするかもしれません：

body { zoom: 2; }

注：これは実際にはブラウザのズームレベルを変更しません。ページ上のすべてを大きくするだけです:)

6
jeremysawesome

それは次のような偏狭な投稿に対する答えです

個人的には、これは悪い考えだと思います。

または

大きくしてみませんか

等

私はPWAを持っています。PWAは多くの空白を含むミニマルなデザインで、そもそも携帯電話向けです（したがって、最初は大画面について考えていませんでした）。それはただの記事で退屈なウェブサイトではありません。かなり複雑なUIです。

そのため、非常に大きな画面（テレビまたは大型モニター）で開くと、見た目が非常にくなります（その時点では余白が多すぎるため）。そして、ユーザーとして、私はそれをズームインするたびに必要です。それは非常に愚かです。私のwebappは、その大画面で少し呼び出されたときに、テレビのソファから使用するだけでなく、より見た目も美しいです。

ですから、@ mediaでは、ディスプレイが広すぎる場合にズームプロパティを変更します。 -moz-transform：scaleがズームとはまったく異なるという問題。

つまり、CSSでWebサイトをズームする場合、3つのオプションがあります。

  • （推奨、既存のページでは難しい）ページの開発中にemおよびremユニットを使用する。これにより、本文のフォントサイズを変更するのと同じくらい簡単にページの「ズーム」を変更できます。

  • （既存のページの方が簡単です）クロスブラウザエクスペリエンスに「transform：scale」を使用しますが、期待どおりに機能しない場合があります。

  • （非推奨、既存のページでは簡単）CSSの "zoom"プロパティを標準プロパティではないにもかかわらず使用するため。 Firefoxを犠牲にします。また、絶対位置に配置されたフレックスボックスでは、予期しないマイナーな動作がいくつかあります。

1
Kirill Reznikov