HTML & CSS Interview Question #30
What is the viewport meta tag and why is it important?
Forms, Validation, Metadata, Media, Responsive Images & Accessibility Junior Beginner
Quick Interview Answer
The viewport meta tag controls how a page is sized and scaled on mobile devices. A common responsive configuration sets the viewport width equal to the device width and establishes an initial scale of 1.
Detailed Explanation
The viewport meta tag controls how a page is sized and scaled on mobile devices. A common responsive configuration sets the viewport width equal to the device width and establishes an initial scale of 1.
Without appropriate viewport configuration, a mobile browser may lay out the page using a wider virtual viewport and then scale it down, making responsive CSS behave differently from what the developer expects.
Code Example
<meta name="viewport"
content="width=device-width, initial-scale=1.0">