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.
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!