You can test that a page is usable on a mobile screen even if you don't have a mobile device. Most browsers provide developer tools that allow the browser to emulate one. At the time of this writing, Firefox offers the most stable responsive design tools, and you are encouraged to use it for this exercise.
On a desktop computer, pop this page with a button and placeholder text up into its own window or tab:
Notice how the words are legible and the button is clickable on your desktop display.
Now open up the developer tools in Firefox. Find the button Responsive Design Mode icon and click it. The browser's viewport shrinks to match a preconfigured mobile device. Try switching between various device configurations. What do you notice about the text and button?
The text and button are likely very small. Why? The layout inspector reveals that the body is 980 pixels wide, but these pixels are only logical pixels. The mobile device itself may not have this many physical pixels. The Galaxy S9, for example, only has 360 pixels. To fit the 980-pixel body inside the 360-pixel viewport, the body is scaled down. A shrink factor of ~2.7 makes the text unreadable and the button very hard to click.
Why does this happen? Well, it all started with the first iPhone. The Apple developers who adapted Safari for the iPhone had a problem: the web wasn't made with mobile devices in mind. Many sites assumed a wider width than the iPhone offered. Since the entire web wasn't going to change overnight, the developers decided to pretend that they had a viewport of 980 pixels, a minimal size that was expected of most desktop computers of the time. Safari rendered the content into this 980-pixel viewport and then zoomed out to make it fit inside the physical bounds of the screen. The other browsers adopted this practice.
You as a web developer can announce that you do not want this 980-pixel viewport and the accompanying zooming out by adding a single meta element to the head of your page:
<meta name="viewport" content="width=device-width,initial-scale=1">The content attribute ensures that the viewport's width matches the device's width. On a mobile device, the device width is the screen size. On a desktop, it is the browser's window width. The initial scale is set to 1, which means the content will appear at its normal size.
You add the meta tag in the head element. Inspect this page in responsive design mode, and you should see readable text and a clickable button:
From here on out, every single page you write should have this meta viewport tag. If you leave it out, you will be inflicting a worse experience on your mobile users.