• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Responsive Web Design Viewport

← Previous Next →

🔹 What is the Viewport?

The viewport is the visible area of a web page in the user's browser window. On desktops, the viewport size is typically the browser window size. On mobile devices, it's the screen width of the device, but can behave differently if not properly configured.

To ensure websites look and behave correctly on different devices, we must configure the viewport using the <meta> tag.

🔸 Why is Viewport Important in RWD?

Without setting the viewport:

  • Pages appear zoomed out on mobile

  • Users need to scroll horizontally

  • Fonts and layouts do not scale properly

  • The responsive styles (e.g., media queries) don’t work as expected

🔸 The Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ Breakdown:

  • width=device-width: Sets the page width to match the device screen width.

  • initial-scale=1.0: Sets the zoom level when the page is first loaded.

🔸 Example: Mobile-Friendly HTML Template

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Viewport Example</title>
  <style>
    body {
      font-family: Arial;
      font-size: 16px;
    }
    .box {
      width: 90%;
      margin: 20px auto;
      background: #f0f0f0;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This box scales based on the screen size.</div>
</body>
</html>

🔸 Optional Meta Tag Values

Attribute Purpose
minimum-scale Limits how much the user can zoom out
maximum-scale Limits how much the user can zoom in
user-scalable=no Disables pinch zoom
height=device-height Not often used; sets height explicitly

Practice Questions

✅ Write HTML/CSS to solve these tasks:

Q1. Create a basic responsive page that uses the correct viewport tag.

Q2. Remove the viewport tag and observe how the layout breaks on mobile.

Q3. Set a fixed width and compare it with width=device-width.

Q4. Add maximum-scale=2.0 and test zooming on mobile.

Q5. Disable zooming using user-scalable=no.

Q6. Style a div that adjusts width using width: 90%.

Q7. Make font-size scale properly using em or rem units.

Q8. Apply a media query to change layout on small viewports.

Q9. Create two versions of a page: one with and one without the viewport tag.

Q10. Combine viewport tag with responsive images and test on different devices.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top