ホームページ > 記事 > ウェブフロントエンド > JavaScript での innerWidth と innerHeight の使用方法の詳細な説明

JavaScript での innerWidth と innerHeight の使用方法の詳細な説明

小云云オリジナル: 2018-01-24 15:46:181585ブラウズ

この記事では主に JavaScript の innerWidth と innerHeight について簡単に説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

innerWidth プロパティと innerHeight プロパティ

説明: window オブジェクトの読み取り専用プロパティは、ウィンドウのドキュメント表示領域の高さと幅をピクセル (px) 単位で宣言します。 (注: ここでの幅と高さには、メニューバー、ツールバー、スクロールバーなどの高さは含まれません)

以下では、これら 2 つのプロパティを確認します:

画面解像度: 1920x1080 ブラウザ: QQ ブラウザ (カーネルChrome) コードは次のとおりです:

var width=window.innerWidth,height=window.innerHeight; //ウィンドウの高さと幅を受け取るために幅と高さをそれぞれ定義します

alert(width);ウィンドウの幅は 1920px

alert(height); //ブラウザの両側に障害物がないため、ウィンドウの高さは 950px

innerWidth です。したがって、画面の幅は 1920 で、innerHeight はブラウザーにはツールバーがあり、ディスプレイにはタスクバーがあるため、130px で圧縮されました

今回、ブロガーはタスクバー (実際には非表示) とツールバーのタブを強制終了し、F12 キーを押して開発者向けオプションを追加しました。もう一度:

/*————————干掉任务栏后————————*/
  var width=window.innerWidth,height=window.innerHeight;  
  alert(width);  //宽度没有变化,还是1920px
  alert(height); 　　//而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度

  /*————————又干掉标签页后，并加上开发者选项后————————*/
  var width=window.innerWidth,height=window.innerHeight;
  alert(width);  //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px 
  alert(height); 　　//而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

結論: 説明 innerHeight と innerWidth は、表示ウィンドウのピクセルを計算するだけです。メニューバーやツールバーなどの外部要因が圧迫されていない場合は、表示形式に従ってください。 . 外部要因をテストした後、以下をテストします内部要因のスクロールバーを見てみましょう

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  <title>测试innerHeight属性</title>
   
  </head>
  
  <body>
  <p style="width:500px;height:1300px;background-color:red;"></p>
  
  <script>  
    window.onload=function(){
     /*————————p超出长度,带着滚动条后————————*/
     var width=window.innerWidth,height=window.innerHeight;  
      alert(width);  //窗口的宽度 1920px
      alert(height); 　　//窗口的高度 950px
   }
   </script>
  </body>

　　 </html>

結論: 内部スクロールバーは、存在しても幅には影響を与えないことを意味します。 1920px

最終結論: innerHeight と innerWidth はフォームの高さと幅を取得します。(ブラウザーの開発者向けオプション、お気に入り) などの外部要因はそれに影響しますが、内部要因 (スクロールバー) は影響しません

最も欠陥のあるIEについて話しましょう、IEの互換性について、次のように解決できます

//兼容代码可以这样子写
var width = window.innerWidth,height = window.innerHeight;

if (typeof width != 'number') {  //如果类型不为number,表示该浏览器不支持innerWidth属性

 if (document.compatMode == 'CSS1Compat') {   //CSS1Compat：判断是否为标准兼容模式。

  width = document.documentElement.clientWidth;

  height = document.docuementElement.clientHeight;

 } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)

  width = document.body.clientWidth;   //网页可见区域宽

  height = document.body.clientHeight;   //网页可见区域高
}
  alert(width);
  alert(height);

JavaScript での innerWidth と innerHeight の使用方法の詳細な説明

関連記事