In the HTML page, the Window object is accessed through JavaScript code, which gives you a lot of information about the size of the screen, which is listed and differentiated below.
Screen information in the Window object Window.innerheight, Window.innerwidth
- Read-only property, in pixels
- The height and width of the document display area of the browser window
- Does not include the height of the menu bar, toolbar, scroll bar, etc.
- These properties are not supported under IE8 and are substituted with the clientwidth and ClientHeight properties of Document.documentelement or document.body (related to the version of IE)
Window.outerheight, Window.outerwidth
- Read-only property, in pixels
- The height and width of the entire browser window
- Often used to set the width and height of window.open open windows
- IE8 does not support this property and does not provide an alternative property
Window.screenleft, Window.screentop, Swindow.creenx, Window.screeny
- Read-only property, integer
- The X-and y-coordinates of the upper-left corner of the browser window on the screen
- IE, Safari and Opera support Screenleft and Screentop
- Firefox and Safari support ScreenX and ScreenY
Window.screen.availHeight, Window.screen.availHeightavailWidth
- Measured in pixels
- The available height and width of the browser's screen
- The vertical space assigned to semi-permanent features (such as the taskbar at the bottom of the screen) is not included in Windows
Window.screen.height, Window.screen.width
- Measured in pixels
- The height and width of the monitor screen
- Adjust the display device's resolution will change
- A few mobile devices above the value is not the actual display size, such as Samsung S8
Screen information in the Document object
It's complicated! It's really complicated! These values are related to whether the Doctypeie is specified, whether the Web page exceeds the window width. And firefox,chrome in these mainstream browsers for elements of ClientWidth, offsetwidth, scrollwidth information technology have their own standards. The following is a brief explanation as a reference. Detailed new in the actual application of the adjustment.
The following document.body and Document.documentelement are similar, and the body is also a DOM element.
Document.body.clientHeight, Document.body.clientWidth
- The height and width of the content area can be displayed in the browser
- Document.documentelement represents the visible height and width of an element
- Irrelevant to the content of the page
- Scroll bar not included, padding counted
- ClientHeight = toppadding + bottompadding+ height-scrollbar.height
Document.body.offsetHeight, Document.body.offsetWidth
- The height and width of the visible area of the page content including edges
- offsetheight = clientheight + scroll bar + border
Document.body.scrollHeight, Document.body.scrollWidth
- Page body Full text height and width
- ScrollHeight and clientheight in different browsers are not the same size relationship
Solution Solutions
ScrollWidth and clientwidth can be compromised in the following ways:
var=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth);var=document.documentElement.clientWidth||document.body.clientWidth;
The following is an enumeration of the size attribute information for a common HTML element:
- Element.clientheight: The visible height of the element
- Element.clientwidth: The visible width of the element
- Element.offsetheight: The height of the element
- Element.offsetwidth: The width of the element
- Element.offsetleft: The horizontal offset position of the element
- Element.offsettop: The vertical offset position of the element
- Element.offsetparent: Offset container for elements
- Element.scrollheight: The overall height of the element
- Element.scrollleft: The distance between the left edge of the element and the view
- Element.scrolltop: The distance between the top edge of an element and the view
- Element.scrollwidth: The overall width of the element
Because I caishuxueqian, there are missing errors, you are welcome to point out.
Original source: http://uusama.com/496.html
The various screen size information that JavaScript can get in an HTML page
