http://www.quirksmode.org/mobile/viewports.html#link12
https://javascript.info/tutorial/coordinates
- CSS pixel: such as specified like 12px
- Device pixels: screen.width/height - device resolution
- When user zoom not 100%, CSS pixel != device pixel
- Generally, developer only interested in CSS pixels
Everything below is in CSS pixel unless specified
Screen Size (device pixel)
- screen.width / screen.height
- measured in device pixels, never change (it's the physical screen)
- window.innerWidth / window.innerHeight
- browser's "client area", i.e. without menu, toolbar, etc
- changes when user changes zoom
- Compatibility issues: Opera
- window.pageXOffset / window.pageYOffset
- On desktop - is exactly equal to the browser window, contains the <html> element
- "the part of the webpage that the user can currently see"
- "the scrollbars move the viewport to show other parts of the page"
- viewport can be smaller than the page - because the page is zoomed larger than the viewport (and scroll bar appears)
- Measure:
- document.documentElement.clientWidth / clientWidth
- tip: document.documentElement is in fact the <html> element
- however, documentElement indeed can be specified (not recommended) a dimension
- NOT RECOMMENDED
- in only this specific case, not the <html> element but the viewport dimension changed
Difference between window size / viewport:
- window size include scrollbar, viewport does not
According to the reference, not possible at the time writing. Maybe changed?
- document.documentElement.offsetWidth / offsetHeight
- what's difference with "document dimension" the author of reference claim not possible to measure?
- at least 5 property pairs are exposed for a mouse event
- pageX / Y -> relative to <html> element (most often used)
- clientX / Y -> relative to viewport (sometimes needed)
- screenX / Y -> relative to screen in device pixels (never needed)
- to get element coordination, use "elem.getBoundingClientRect" (W3C standard) -> relative to window (viewport)
- to get multiple rects (long, inline text element that wrap), use "elem.getClientRects()" [works excepts IE<8]
- offsetLeft / offsetTop / offsetWidth / offsetHeight : check later
- able to specify CSS when media has certain property (e.g. max-width)