• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

Responsive Web Design Viewport Quiz

Q1: What does the viewport meta tag control?

A. Page title
B. How the webpage is displayed on different devices
C. Font loading
D. CSS rendering engine

Q2: What is the purpose of width=device-width?

A. Matches page width to device screen width
B. Sets a fixed width
C. Disables responsiveness
D. Increases screen zoom

Q3: What does initial-scale=1.0 do?

A. Sets the initial zoom level to 100%
B. Disables zooming
C. Sets font-size to 1em
D. Makes the site dark-themed

Q4: Which tag should be placed inside <head> for mobile responsiveness?

A. <meta charset>
B. <meta name="viewport">
C. <meta http-equiv="refresh">
D. <link rel="viewport">

Q5: What happens if you skip the viewport meta tag?

A. Layout looks normal
B. Content adjusts to screen
C. Page appears zoomed out or tiny
D. Mobile menu works automatically

Q6: What does user-scalable=no mean?

A. Prevents resizing with screen rotation
B. Disables user zoom
C. Centers content
D. Hides scrollbar

Q7: Where is the viewport tag defined?

A. In <body>
B. Inside CSS
C. Inside <head>
D. At the bottom of the page

Q8: What does maximum-scale=1.0 do?

A. Limits zoom-in to 100%
B. Removes zoom
C. Makes font bigger
D. Sets screen resolution

Q9: Which one is a correct viewport tag?

A. <meta name="viewport" content="width=device-width, initial-scale=1.0">
B. <viewport>device-width</viewport>
C. <meta viewport="responsive">
D. <meta device="scale">

Q10: What is the best practice for mobile-friendly websites?

A. Always include a viewport tag
B. Use only px units
C. Avoid media queries
D. Fix all widths
← Previous Next →
Login
Go Back Top