Web window pixel and other notes

Original: http://www.w3cplus.com/css/viewports.html

Screen size Screens size = display size

Screen.width and Screen.height. These two properties contain the full width height of the user's screen. These dimensions are defined using the pixels of the device, and their values are not changed by scaling: they are features of the display, not the browser copyrights owned by the author.

Browser size Window size = Browser size Window.innerwidth/height

• Meaning: Full size of browser with scroll bar size
• Metrics: pixels of CSS
• Compatibility issues: IE does not support, opera with device pixels to measure

Instead, you want to know the internal dimensions of the browser. It defines how much of the current user area is available for your CSS layout to occupy. You can get it through window.innerwidth and Window.innerheight.

Window.pagexoffset and Window.pageyoffset define the horizontal, vertical displacement of the page (document) relative to the window origin. So you can locate how many scroll bars the user has scrolled.

Measure viewport measuring the view portdocument. DocumentElement. Clientwidth/height

• Meaning: size of viewport
• Metrics: pixels of CSS
• Compatibility issue: None

You may want to know the size of the viewport and they can pass the document. DocumentElement. Clientwidth/height to get it.

Rolling displacement scrolling Offsetwindow.pagex/yoffset

• Meaning: See description
• Metrics: pixels of CSS
• Full support: IPhone, Android, Symbian, Iris, MicroB, Skyfire, Obigo
• Problem:
  • Opera, Bolt, Firefox, and NetFront always return 0.
  • Samsung's WebKit Core browser is correctly represented only when the label is written on the page.
• Not supported: IE, it uses document. Scrollleft/top to say

Web window pixel and other notes