ブラウザのズーム率を決定する方法_html/css_WEB-ITnose

まず、いくつかの基本的な知識を知っておく必要があります:

1. CSS ピクセルと実際のピクセル

実際のピクセル: デバイスの固有のピクセル値

css ピクセル: ブラウザーがズームしない場合の CSSピクセルは実際のピクセルに相当します

2. 4 つの画面幅属性

screen.width: デバイスの画面幅は変更されません。たとえば、ノートブックの実際のピクセルが 1280 の場合、結果は常に 1280 になります。ピクセル単位

window.innerWidth : ブラウザ ウィンドウの幅を測定します。測定単位は CSS ピクセルです。 以下に示すように:

document.documentElement.clientWidth: ビューポートの幅として理解でき、ブラウザ ウィンドウの幅 (window.innerWidth) との差は垂直スクロール バーの幅の単位です。このプロパティの は物理 px です

document.documentElement .offsetWidth: この属性は html の幅を取得します

簡単に言えば、次のように表示できます: ブラウザーが画面いっぱいに表示されるとき: screen.width = window.innerWidth

ときズーム率が100%の場合: window.innerWidth = document .documentElement.clientWidth

画面のHTML要素の幅が100%の場合: document.documentElement.offsetWidth = document.documentElement.clientWidth 簡単に言うと以下のようになります。

したがって、ブラウザのスケーリング率を決定する方法は非常に簡単で、コードに直接移動します。

    var ratio = document.documentElement.clientWidth / window.innerWidth

参考文献、詳細な記事