../courses.php
HEAD
HEAD102
90
Viewport And Mobile
Tell phones how wide the page should be.
Why does a modern page need a viewport tag?
The viewport tag tells mobile browsers to size the page to the device width instead of pretending the phone is a tiny window looking at a desktop page.
After the title and description, the next basic head instruction is the viewport. This is the instruction that makes a page behave normally on phones.
Without the viewport tag, a phone may render the page as if it were a wide desktop page and then shrink it down. Text can become tiny and the page can feel broken.
The viewport tag does not replace good CSS. It simply gives responsive CSS the correct screen model to work with.
Most modern pages use the same basic viewport line.
The standard responsive viewport
<head>
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<title>Mobile-Friendly Page - Jit HEAD</title>
</head>
name="viewport"
targets the browser viewport setup.
width=device-width
tells the browser to use the real device width.
initial-scale=1
starts the page at normal zoom.
This tag belongs in the
<head>
because it affects layout before the body is displayed.
The viewport tag helps mobile layout, but your HTML and CSS still need to be responsive.
Mobile readability
Text and layout start at the correct size on phones.
Responsive design
CSS media queries behave against the actual screen width.
User trust
A page that opens tiny on a phone feels outdated or broken.
Basic production setup
Nearly every modern public page should include this line.
Missing mobile setup
<head>
<title>My Page</title>
</head>
Mobile-ready setup
<meta name="viewport" content="width=device-width, initial-scale=1">
Ask ChatGPT: "Does this head include the standard mobile viewport tag?" Then test the page in browser mobile view.
Open an HTML page with a head section.
Add the standard viewport meta tag.
Open browser developer tools.
Switch to mobile device preview.
Compare the page with and without the viewport tag.
Forgetting the viewport tag on a modern page.
Thinking the viewport tag fixes bad CSS by itself.
Disabling zoom for users.
Copying unusual viewport settings without understanding them.
Testing only on desktop width.
Add the standard viewport tag and explain why mobile browsers need it before displaying the page.
Login - Jit4All
Login
Welcome back to Jit4All