Displayed Pixel Width

This page helps with responsive web design. If you expected one viewport, but your device seems to be displaying another, just look at what the colored <div> is on top of the rainbow stack: that is the Virtual Viewport that your device's browser is using to render the page, regardless of the physical pixels or scaled pixels your device can display.

XS (<576)
SM (576-767)
MD (768-991)
LG (992-1199)
XL (>1200)

Reason for this site's existence: FreeCodeCamp's Portfolio page project - I couldn't get my iPhone 6 (375 px physical, 750 px scaled) to display the extra-small (xs) viewport, and I couldn't figure out why. So, rather than argue from what it should be displaying, I wrote this to find out what the phone was actually displaying, and I was surprised to see it was the medium viewport.

Hope this helps anyone in a similar head-vs-wall kinda moment! Happy coding!