Set your Publisher ID in src/config/ads.ts to display live ads.
Responsive Web Design (RWD) & Viewport Meta
Understand fluid grid design, why desktop emulation hurts mobile performance, and how the viewport meta tag unlocks responsive scaling.
The Mandatory Viewport Meta Tag
When the iPhone launched in 2007, most websites were fixed at 960px or 1024px desktop widths. To prevent horizontal scrollbars, mobile browser engines assumed all web pages were 980px wide and rendered them inside a virtual canvas, zooming out until text was completely unreadable without pinch-to-zoom.
The viewport meta tag instructs the mobile browser: "Do not emulate a desktop monitor; set the viewport width equal to the physical screen width of the device, with an initial scale of 1.0."
Without this tag, CSS media queries like @media (max-width: 600px) will never trigger on mobile devices!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Crucial: Required in every responsive HTML head -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web App</title>
</head>
<body>
<h1>Scales accurately across all phones and tablets</h1>
</body>
</html>Avoid setting user-scalable=no or maximum-scale=1.0 in your viewport tag. Disabling pinch-to-zoom creates severe accessibility barriers for visually impaired users and violates WCAG 1.4.4.
The Three Pillars of Responsive Web Design
Pioneered by Ethan Marcotte, Responsive Web Design (RWD) consists of three foundational techniques:
%, vw, fr, rem) rather than rigid fixed pixels (px).max-width: 100%; height: auto; display: block;.Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
What is the primary consequence of omitting the viewport meta tag on mobile devices?