Lesson 25: HTML Responsive Viewport

Mobile-Friendly Page Scaling

The <meta name=”viewport”> tag controls how a webpage displays on mobile screens and tablets by setting the viewport width.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Why&How to use:

Without this tag, mobile browsers render pages at desktop widths, making text extremely small and requiring horizontal scrolling.

			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page</title>
</head>
<body>
    <h1>Mobile Responsive Page</h1>
    <p>This page automatically fits and scales correctly on mobile device screens.</p>
</body>
</html>

		