Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The viewport meta tag controls how your page scales on mobile devices. Without it, mobile browsers render pages at desktop width and zoom out.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Match screen width
No initial zoom
See the difference viewport makes
<div class="diagram">
<div class="device">
<div class="screen bad">
<small>Without viewport</small>
<div class="content tiny">Zoomed out tiny text</div>
</div>
<div class="label">❌ Desktop layout on mobile</div>
</div>
<div class="device">
<div class="screen good">
<small>With viewport</small>
<div class="content">Readable text!</div>
</div>
<div class="label">✅ Proper mobile layout</div>
</div>
</div>Loading preview...
Page that works on all screen sizes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
</head>
<body>
<h1>Responsive Design</h1>
<p>This page adapts to any screen size!</p>
<div class="box">📱 Mobile</div>
<div class="box">💻 Desktop</div>
</body>
</html>Loading preview...