Use JQuery to make browser controls adaptive to browser size

Use JQuery to make browser controls adaptive to browser size

Use JQuery to make browser controls adaptive to browser size

FirstAdd references to jQuery

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

Add Methods window. onresize and window. onload in JS. This method is a system function and is automatically called when triggered.

<Script type = "text/javascript"> window. onresize = function () {var Width = document. body. offsetWidth; // read the browser width // document. getElementById ("ChartData "). width = Width; $ ("# ChartData" ).css ({"width": Width. toString () + "px"}); // use JQuery to adjust the control width document. getElementById ("show_size "). innerHTML = Width + "" + document. body. offsetHeight; // display the current browser width // alert (document. getElementById ("show_size "). value); ChartFrame // The loading page is called} window. onload = window. onresize; </script>

In addition, the method for reading the browser size is as follows:

// Obtain the window width if (window. innerWidth) winWidth = window. innerWidth; else if (document. body) & (document. body. clientWidth) winWidth = document. body. clientWidth; // obtain the window height if (window. innerHeight) winHeight = window. innerHeight; else if (document. body) & (document. body. clientHeight) winHeight = document. body. clientHeight; // detects the body in the Document to obtain the window size if (document.doc umentElement & document.doc umentElement. clientHeight & document.doc umentElement. clientWidth) {winHeight = document.doc umentElement. clientHeight; winWidth = document.doc umentElement. clientWidth ;}

Details:

<Script> function getInfo () {var s = ""; s = "visible area width of the webpage:" document. body. clientWidth; s = "visible area of the webpage high:" document. body. clientHeight; s = "visible area width of the webpage:" document. body. offsetWidth "(including the width of the edge and scroll bar)"; s = "visible area height of the webpage:" document. body. offsetHeight "(including the edge width)"; s = "webpage text width:" document. body. scrollWidth; s = "webpage text Height:" document. body. scrollHeight; s = "the height of the page to which the page is rolled (ff):" document. body. scrollTop; s = "the height of the page to which the page is rolled (ie):" document.doc umentElement. scrollTop; s = "Left of the webpage to which the page is rolled:" document. body. scrollLeft; s = "Page body part:" window. screenTop; s = "webpage body section left:" window. screenLeft; s = "high screen resolution:" window. screen. height; s = "Screen Resolution width:" window. screen. width; s = "available workspace Height:" window. screen. availHeight; s = "available workspace width:" window. screen. availWidth; s = "your screen setting is" window. screen. colorDepth "color"; s = "Your Screen Settings" window. screen. deviceXDPI "pixels/inches"; // alert (s);} getInfo (); </script>