This page shows the current break point and the current viewport dimensions (in the upper right corner of the screen). It also has some content to better visualize how much space some things take.
For instance, by comparing the rendering of this page on a smartphone and within a browser in "Responsive design mode", we noticed some differences. It turned out that the smartphone's browser was configured to scale text content at 110%.
The following rule should go against the edge of the screen.
The following rule should take only a portion of the page (the same has a typical blog post content).
We also show a code block with a monospace font.
10 20 30 40 50
1234567890
1234567890
1234567890
1234567890
1234567890Related: Media queries