JavaScript to get the width and height of the web page and how to be compatible

Time:2021-10-24

In many scenarios, it is necessary to obtain the width and height of the current web page to achieve some effects, but there is still a hole in obtaining the width and height of the web page. Here I summarize and explain in detail. If there is any supplement, please comment and supplement~

Method 1: window.innerwidth/window.innerheight

This wayOnly IE9 and above browsers are supported

Web page height, open F12 console, of course, the height will be different

Method 2: document.documentelement.clientwidth


console.log(document.documentElement);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

Document.documentelement gets HTML, so it gets the whole web page

It can be used for IE9 and below. Of course, it also supports IE9 and above. It can be used for compatibility

Mode 3: acquisition of width and height in hybrid mode / weird mode

Weird mode: if you don’t write a document declaration (that is, the <! DOCTYPE HTML >) in the first line, it is a weird mode. In this mode, there will be some different rendering methods, which can be understood by interested partners (obtaining width and height explained here is one of the characteristics of weird mode).


console.log(document.compatMode);
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);

Only in this way can we obtainIn hybrid modeCorrect acquisition

No error will be reported in standard mode, but the obtained width and height are not correct

Document.compatmode can know whether the current document is mixed or standard (backcompat mixed, css1compat standard)

You think it’s over?

Problems arise~

So the question comes: how compatible? (don’t think compatibility is unimportant. Incompatibility has a great risk of error reporting. Hey! After all, you don’t know whether users will use IE6 to open web pages @#@)

Encapsulation:Compatible with high and low version browsers, standard / hybrid mode


function getWid_Hei(){
    let width,height;
    if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
    }else if(document.compatMode === "BackCompat"){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }else{
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    return {
        width:width,
        height:height
    }
}
let {width,height} = getWid_Hei();
console.log(width,height);

summary

This is the end of this article on JavaScript to obtain the width and height of web pages and how to be compatible. For more relevant JS to obtain the width and height of web pages, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]