MOBILE

Responsive HTML Basics

Prepare pages to adapt cleanly to phones, tablets and desktops.

After this lessonUse viewport metadata and flexible layout principles.

How it works

The viewport meta tag tells mobile browsers to size the page to the device width. Responsive design then uses flexible CSS, media queries and content that can wrap or scroll when needed.

Test real content at narrow widths. A layout that works with placeholder text can still fail with long material numbers, filenames or translated labels.

REAL WORK

Make a browser-based work tool usable on a shop-floor tablet as well as a desktop PC.

SYNTAX

The pattern

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

Example

<meta name="viewport" content="width=device-width, initial-scale=1">
<main>Responsive content</main>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<meta name="viewport" content="width=device-width, initial-scale=1">
<main>Responsive content</main>

QUICK CHECK

Which meta setting is essential for normal mobile scaling?

Progress is stored only in this browser. No account required.