• Menu
  • Home
  • web design
    • CSS animation
    • changing background
    • media width test

    • ---

    • Mynott.uk
    • Teaching for Learning
    • TICS
  • computing
    • PowerShell
    • Group Policy
    • Excel
    • passwords
    • links
  • other
    • music
    • Rubik’s cube
    • Taekwon-Do
    • settings
  • about
    • contact
    • about
    • gallery

Media width test

The image below is fixed to the left of the viewport and won’t resize with different window widths so you can see the CSS “@media” width for the current device/browser.

For JavaScript, innerWidth and innerHeight ignore the scrollbar.  clientWidth and clientHeight are measured inside the scrollbar (if there is one).  CSS “@media” uses the innerWidth value.

Click the “refresh” button for the current values.

innerWidth: ?px  (CSS @media)
clientWidth: ?px

innerHeight: ?px
clientHeight: ?px

 
Useful for css media queries - particarly for mobile devices as some have quite suprising values.