ブラウザのズームステータスのJavaScript検出実装コード_JavaScriptスキル

ここで説明するズームは、ブラウザのサイズのズームを指すのではなく、ブラウザの Web ページのコンテンツのズーム率を指します (ズームするには Ctrl キーと - キーを押します)。
このズームを検出するにはさまざまな方法があります。QQ Space ではフラッシュを使用してブラウザがズームしているかどうかを検出します。これはブラウザのズームを検出するための JavaScript メソッドです。
IE6 の場合は、IE6 ではテキストのみをズームできるため、無視してください。
まず、ブラウザーによって提供される標準の検出インターフェイスについて説明します。 window.devicePixelRatio は、デバイス上の物理ピクセルとデバイスに依存しないピクセルの比率であり、Web ページが拡大縮小されたかどうかを検出するために使用できます。通常の PC ブラウザでは、デフォルト値は 1 で、デフォルトではスケーリングはありません。現在、Firefox、chrome などが十分にサポートされています。
さて、今度は IE がこれをどのように処理するかについて説明します。 IE には、window.screen.deviceXDPI と window.screen.logicalXDPI という 2 つのプロパティが用意されています。deviceXDPI はデバイス上の物理ピクセルに対応し、logicalXDPI はデバイス上の独立したピクセルの割合に対応します。標準の検出インターフェイスは、IE 手法に基づいた改良にすぎないと推定されます。システムのデフォルトは 96dpi であるため、Windows XP 以降のシステムでは、これら 2 つのプロパティのデフォルト値は 96 です。
上記のどちらもサポートしていないブラウザの場合は、window.outerWidth プロパティと window.innerWidth プロパティを使用することもできます。 externalWidth はウィンドウ要素の実際の外側の幅を返し、innerWidth はウィンドウ要素の実際の内側の幅を返します。どちらの幅にもスクロール バーの幅が含まれます。
これらの属性により、基本的に PC ブラウザ上で一般的なブラウザを扱うことができます。実装コードは次のとおりです:

detectZoom 関数の戻り値が 100 の場合、それはデフォルトのズーム レベルであり、100 より大きい場合はズームインされ、100 より小さい場合はズーム アウトされます。

function detectZoom (){ 
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

   if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
  }
  else if (~ua.indexOf('msie')) {  
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }
  
   if (ratio){
    ratio = Math.round(ratio * 100);
  }
  
   return ratio;
};

元の記事、転載する場合は明記してください: フロントエンド開発

から転載