suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung von innerWidth und innerHeight in JavaScript

Detaillierte Erklärung von innerWidth und innerHeight in JavaScript

黄舟
黄舟Original
2017-10-12 10:50:461737Durchsuche

Der folgende Editor bietet Ihnen eine kurze Diskussion über innerWidth und innerHeight von JavaScript. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Eigenschaften innerWidth und innerHeight

Beschreibung: Das schreibgeschützte Attribut des Fensterobjekts deklariert das Dokument des Fensters Die Höhe und Breite des Anzeigebereichs, gemessen in Pixel (px). (Hinweis: Die Breite und Höhe umfassen hier nicht die Höhe von Menüleisten, Symbolleisten, Bildlaufleisten usw.)

Im Folgenden werden diese beiden Eigenschaften überprüft:

Bildschirmauflösung ist: 1920x1080 Browser: QQ-Browser (Kernel ist Chrome) Der Code lautet wie folgt:

var width=window.innerWidth,height=window.innerHeight; //define width bzw. height erhält die Höhe und Breite des Fensters

alert(width); //Die Breite des Fensters 1920px

alert(height); Höhe des Fensters 950 Pixel

Die innere Breite erreicht perfekt die Bildschirmbreite von 1920, da auf beiden Seiten des Browsers keine Hindernisse vorhanden sind, während die innere Höhe um 130 Pixel verkleinert wird, da im Browser eine Symbolleiste vorhanden ist und eine Taskleiste auf dem Display

Dieses Mal hat der Blogger die Taskleiste (eigentlich ausgeblendet) und die Registerkarten in der Symbolleiste gelöscht, F12 gedrückt und Entwickleroptionen zum erneuten Testen hinzugefügt: 


/*————————干掉任务栏后————————*/
  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

Fazit: Erklären Sie, dass innerHeight und innerWidth nur die Pixel des Anzeigefensters berechnen, wenn es keine externen Faktoren wie Menüleisten und Symbolleisten gibt, die es komprimieren wird automatisch erweitert, und wenn ja, drücken Sie einfach das Anzeigeformular

Nach dem Testen der externen Faktoren testen wir die Bildlaufleiste der internen Faktoren 


<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>

Fazit: Das bedeutet, dass die interne Bildlaufleiste keinen Einfluss auf die innere Breite hat. Auch wenn sie vorhanden ist, hat sie immer noch 1920 Pixel.

Abschließende Schlussfolgerung: innerHeight und innerWidth ermitteln die Höhe und Breite des Formulars. Externe Faktoren wie (Browser-Entwickleroptionen, Favoriten) haben einen Einfluss darauf, während interne Faktoren (Scrollen) Einfluss darauf haben

Lassen Sie uns über das Problem der IE-Kompatibilität sprechen. Es kann wie folgt gelöst werden.


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

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

 if (document.compatMode == &#39;CSS1Compat&#39;) {   //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);

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von innerWidth und innerHeight in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：rem absolute adaptive SchemaanalyseNächster Artikel：rem absolute adaptive Schemaanalyse

In Verbindung stehende Artikel

Mehr sehen