From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

The viewport meta tag

The viewport meta tag - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

The viewport meta tag

“

- [Instructor] When mobile browsers first came into use, websites often used fixed-width layouts that were designed for desktop and laptop computers. Since phone screens are much smaller, loading the desktop sized layout on a webpage would result in a lot of content being cut off. By default, mobile browsers would scale down the websites to fit the device screen, presenting a zoomed out version of the desktop layout. With touchscreens, users can pinch and zoom in and out of different parts of the website. Mobile browsers still use this default behavior today. When adding responsive styles and media queries, we need to disable the scaling so your mobile optimized styles display as intended. We can do that using an HTML tag, often referred to as the viewport meta tag because it provides the browser with information about the viewport. The HTML template for the course project already includes this tag in the head section, so…

Contents