Use the js mini library to obtain the browser height and width Information

Therefore, when you click a button on a webpage with a long content to display the DIV layer, you will find no effect (it is already displayed on the top of the page). Therefore, we need to prepare information about the user's current browsing location. Before implementing this requirement, let's take a look at the tools available in js for us to use:

Visible area width of the webpage: document. body. clientWidth;
Visible area height: document. body. clientHeight;
Visible area width of the webpage: document. body. offsetWidth + "(including the width of the edge and scroll bar )";
Visible area height of the webpage: document. body. offsetHeight + "(including the width of the edge )";
Full text width of the webpage: document. body. scrollWidth;
Webpage text height: document. body. scrollHeight;
The height of the page to be rolled (ff): document. body. scrollTop;
The height of the page to be rolled (ie): document.doc umentElement. scrollTop;
Left of the webpage to be rolled: document. body. scrollLeft;
Page body: window. screenTop;
Page body part left: window. screenLeft;
Screen Resolution height: window. screen. height;
Screen Resolution width: window. screen. width;
Available screen workspace Height: window. screen. availHeight;
Available screen workspace width: window. screen. availWidth;
Your screen Settings are window. screen. colorDepth + "bit color ";
Set window. screen. deviceXDPI + "pixel/Inch" on your screen ";

This article comes from the internet. I was crazy when I saw so many similar concepts, but I had a hard time reading and understanding it. After understanding and absorbing it myself, I think I will be crazy every time I want to get a height or width information. Therefore, I have made some arrangement and abstraction on these attributes of the browser, the following three objects are used to strip so many similar properties: the first is the page, the second is the window, and the third is the view. Let's take a look at the picture to understand the meaning of these three objects:

Here is an explanation of the three concepts:

Page: it is an abstraction of the page we create. Its height is usually higher than the height of our browser, and its width is usually less than or equal to the width of our browser.

Browser window: an abstract of the browser we use. It contains the menu bar, toolbar, Bookmarks Bar, Status Bar, and page display area. Therefore, the height is definitely greater than or equal to the height of the view, and the width is definitely greater than or equal to the width of the view.

View: the area where the page is displayed in the browser.

With these three concepts, let's write a small class library to get the height and width of this "object:

Copy codeCode: var Browser = {
};
// Page
Browser. Page = (function (){
Return {
ScrollTop: function (){
Return Math. max (document. body. scrollTop, document.doc umentElement. scrollTop );
},
ScrollLeft: function (){
Return Math. max (document. body. scrollLeft, document.doc umentElement. scrollLeft );
},
Height: function (){
Var _ height;
If (document. compatMode = "CSS1Compat "){
_ Height = document.doc umentElement. scrollHeight;
} Else {
_ Height = document. body. scrollHeight;
}
Return _ height;
},
Width: function (){
Var _ width;
If (document. compatMode = "CSS1Compat "){
_ Width = document.doc umentElement. scrollWidth;
} Else {
_ Width = document. body. scrollWidth;
}
Return _ width;
}
};
})();
// Window:
Browser. Window = (function (){
Return {
OuterHeight: function (){
Var _ hei = window. outerHeight;
If (typeof _ hei! = "Number "){
_ Hei = Browser. ViewPort. outerHeight ();
}
Return _ hei;
},
OuterWidth: function (){
Var _ wid = window. outerWidth;
If (typeof _ wid! = "Number "){
_ Wid = Browser. ViewPort. outerWidth ();
}
Return _ wid;
},
InnerHeight: function (){
Var _ hei = window. innerHeight;
If (typeof _ El! = "Number "){
_ Hei = Browser. ViewPort. innerHeight ();
}
Return _ hei;
},
InnerWidth: function (){
Var _ wid = window. innerWidth;
If (typeof _ wid! = "Number "){
_ Wid = Browser. ViewPort. innerWidth ();
}
Return _ wid;
},
Height: function (){
Return Browser. Window. innerHeight ();
},
Width: function (){
Return Browser. Window. innerWidth ();
}
}
})();
// View:
Browser. ViewPort = (function (){
Return {
InnerHeight: function (){
Var _ height;
If (document. compatMode = "CSS1Compat "){
_ Height = document.doc umentElement. clientHeight;
} Else {
_ Height = document. body. clientHeight;
}
Return _ height;
},
InnerWidth: function (){
Var _ width;
If (document. compatMode = "CSS1Compat "){
_ Width = document.doc umentElement. clientWidth;
} Else {
_ Width = document. body. clientWidth;
}
Return _ width;
},
OuterHeight: function (){
Var _ height;
If (document. compatMode = "CSS1Compat "){
_ Height = document.doc umentElement. offsetHeight;
} Else {
_ Height = document. body. offsetHeight;
}
Return _ height;
},
OuterWidth: function (){
Var _ width;
If (document. compatMode = "CSS1Compat "){
_ Width = document.doc umentElement. offsetWidth;
} Else {
_ Width = document. body. offsetWidth;
}
Return _ width;
},
Width: function (){
Return Browser. ViewPort. innerWidth ();
},
Height: function (){
Return Browser. ViewPort. innerHeight ();
}
}
})();

Some notes:
1. You can obtain the width and height of the inside of multiple browsers.
2. Like other browsers (Opera, Chrome, FirFox, and Safari) in IE 9, Windows is supported. innerHeight, window. innerWidth, window. outerHeight, window. the four properties outerWidth are used to obtain the width and height of the browser's window and view. However, IE versions earlier than IE9 do not have these attributes. Therefore, in this case, I equivalent the concept of a viewport to a window.
2. Although the window has width and height information, it is not necessarily the true width and height information of the real browser window. Some browsers do not return the height information such as the menu bar and toolbar.
Example:
On a page with too many vertical content, make sure that a DIV is always at the center of the view (non-Precise center ):
Code:Copy codeThe Code is as follows: window. onload = window. onresize = function (){
Var top = Math. round (Browser. page. scrollTop () + (Browser. viewPort. height ()/2)-(parseInt (document. getElementById ("divCenter "). style. height)/2 ));
Var left = Math. round (Browser. page. scrollLeft () + (Browser. viewPort. width ()/2)-(parseInt (document. getElementById ("divCenter "). style. width)/2 ));
Document. getElementById ("divCenter"). style. top = top + "px ";
Document. getElementById ("divCenter"). style. left = left + "px ";
}

You can change the window size during testing.
It's not too early. Good night!
View Source Code download