HTML Responsive
Responsive pages adapt to any screen size, from phones to widescreen desktops.
The first and most important step toward a responsive page is the viewport meta tag, which tells mobile browsers to match the device width instead of pretending to be a wide desktop.
The Viewport Tag
Viewport meta tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>Responsive Habits
- Add the viewport tag inside <head> on every page.
- Let images scale with max-width:100% so they never overflow.
- Prefer flexible widths in percentages over fixed pixel widths.
A Flexible Image
Image that scales
<!DOCTYPE html>
<html>
<body>
<img src="photo.jpg" alt="A scenic view" style="max-width:100%; height:auto;">
</body>
</html>Note: Without the viewport tag, a mobile browser shrinks the whole page to fit, making text tiny and hard to read.
Exercise: HTML Responsive
Which tag configures a page so it renders at the device's actual screen width on mobile?
