Über innerWidth und innerHeight von JavaScript-PHP-Tutorial-php.cn

Über innerWidth und innerHeight von JavaScript

一个新手

Freigeben： 2023-03-16 15:44:02

Original

1413 Leute haben es durchsucht

innerWidth- und innerHeight-Attribute

Beschreibung: Das schreibgeschützte Attribut des Fensterobjekts gibt die Höhe und Breite des Dokumentanzeigebereichs des Fensters an, gemessen in Pixel (px). (Hinweis: Die Breite und Höhe hier umfassen nicht die Höhe der Menüleiste, Symbolleiste, Bildlaufleiste usw.)

Die folgenden beiden Eigenschaften werden überprüft:

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

 var width=window.innerWidth,height=window.innerHeight;         //分别定义width和height接收窗口的高和宽
     alert(width);        //窗口的宽度 1920px
     alert(height);   　　//窗口的高度  950px

Nach dem Login kopieren

innerWidth Da es auf beiden Seiten des Browsers keine Hindernisse gibt, ist die Breite des Bildschirms ist perfekt erhalten 1920 und innerHeight wurde um 130 Pixel verkleinert, weil der Browser eine Symbolleiste und die Anzeige eine Taskleiste hat

Diesmal hat der Blogger die Taskleiste (eigentlich ausgeblendet) und die Symbolleiste entfernt . Tab und drücken Sie F12 plus Entwickleroptionen, um erneut zu testen:

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

Nach dem Login kopieren

Fazit: Das bedeutet, dass innerHeight und innerWidth nur die Pixel des Anzeigefensters zählen, wenn keine vorhanden sind Wenn externe Faktoren wie Leisten und Symbolleisten darauf drücken, wird es automatisch erweitert. Wenn dies der Fall ist, drücken Sie einfach auf das Anzeigefenster

Nachdem wir die externen Faktoren getestet haben, testen wir die Bildlaufleiste für interne 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>=
                     width=window.innerWidth,height=
                     alert(height);   　　</script>
        </body>
　　 </html>

Nach dem Login kopieren

Fazit: Es zeigt, 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 (Bildlaufleisten) keinen Einfluss darauf haben

Sprechen wir über den IE, der die meisten Mängel aufweist. Das Problem der IE-Kompatibilität kann auf diese Weise 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);

Nach dem Login kopieren

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