Viewport, web dimention & coordinations

References

http://www.quirksmode.org/mobile/viewports.html#link12

https://javascript.info/tutorial/coordinates

Pixels (CSS, device)

  • 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 Size

  • window.innerWidth / window.innerHeight
  • browser's "client area", i.e. without menu, toolbar, etc
  • changes when user changes zoom
  • Compatibility issues: Opera

Window Scrolling Offset

  • window.pageXOffset / window.pageYOffset

Viewport

  • 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

Document Width

According to the reference, not possible at the time writing. Maybe changed?

Measuring <html> element

  • document.documentElement.offsetWidth / offsetHeight
  • what's difference with "document dimension" the author of reference claim not possible to measure?

Event Coordinations

  • 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)

Element Coordinations

  • 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

CSS Media Query

  • able to specify CSS when media has certain property (e.g. max-width)