CSS Viewport

By Tony 9.6.2024

CSS media queries are really powerful, they can change the whole website just based on the size of the screen. But it's a lot of work (and code) to turn the entire website responsive using only media queries. There's another way to turn a website responsive without so much code, although it's not as customizable or flexible as media queries. It's called a viewport, and we'll explore that today.

Well, this is technially HTML, but it's more related to the topic of a website's responsive design, so we put it here, as it is more advanced. Think of the viewport as a virtual window that the browser uses to render your site. On a laptop, the virtual window matches the screen size, so the website looks fine. But on a phone, the browser shrinks that virtual window by a lot to fit the narrow screen, making everything tiny and unresponsive. Sure, you can use media queries to enlarge all the elements, but that's a lot of code for something that can be easily achieved by one HTML meta tag. This tag (shown above) tells the browser to not shrink down the virtual window when it's projecting it on the screen. Instead, it tells the browser to directly put the window on the phone's screen, even if it overflows. This makes all the elements on the phone screen they're normal size, but part of the website is overflowing. Now you can use media queries to fix the overflowing elements. Viewport tells the browser to scale the site directly for the device's screen, even if it overflows a bit. Then, you can use media queries to fine-tune the design. Have fun exploring these CSS tips!