The viewport is your user’s view of your web design. Your user’s viewport will be different depending on what kind of device they are using. It might be a small Android smartphone or an iPhone 12 pro. They might be using Firefox on a desktop computer.
As responsive web designers, we design for all of these viewports. We can use CSS tools like Flexbox and Media Queries to arrange content in different ways depending on our user’s viewport.
Unfortunately, most mobile browsers assume that webpages are only designed for desktop and scale down the entire web page to fit the screen by default.
HTML 5 introduced a method to tell mobile browsers that a webpage has been specifically designed for mobile and desktop. We can take control of the viewport by adding the viewport meta tag to the head of our HTML pages.
<meta name="viewport" content="width=device-width, initial-scale=1">The above meta tag gives the browser instructions on controlling the dimensions of the webpage. The width=device-width part sets the width of the webpage to the width of the device screen. The initial-scale=1 part sets the initial zoom level when the page is first loaded.
Don’t forget to add the Viewport meta tag to the head of your document.
Note: In Codepen you can easily add the viewport meta tag to a pen by going to Settings > HTML > Stuff for <head> and clicking the ‘↑ Insert the most common viewport meta tag’ button.
