Modern websites are accessed on many devices including mobiles, tablets, and desktops.
HTML provides viewport settings that help control how a webpage is displayed on different screen sizes.
What Is the Viewport
The viewport is the visible area of a webpage on a device.
Mobile devices have smaller screens, so browsers need instructions on how to scale and display content.
The Viewport Meta Tag
The viewport meta tag controls page width and scaling on mobile devices.
Without this tag, websites may appear zoomed out or unreadable on phones.
In this example:
- width=device-width sets the page width to match the device screen
- initial-scale=1.0 sets the default zoom level
Why the Viewport Meta Tag Is Important
It ensures proper scaling on mobile devices.
Google considers mobile-friendliness as a ranking factor.
Mobile Optimization Basics
- Use responsive layouts
- Avoid fixed-width designs
- Ensure text is readable on small screens
Viewport and Responsive Design
The viewport meta tag works together with CSS media queries.
HTML defines the viewport, while CSS adjusts layout based on screen size.
Common Viewport Mistakes
- Missing viewport meta tag
- Using fixed-width values
- Disabling user zoom unnecessarily
Why Viewport Matters for Jobs
Every production website must be mobile-friendly.
Interviewers often ask about viewport and responsive design basics.
Practice Task
Add a viewport meta tag to a webpage and test it on a mobile device or emulator.
What You Will Learn Next
In the next lesson, you will learn about favicons and browser metadata.