[BUG] initialScale: 0 in Viewport Config Renders the Entire Site Unreadable on Mobile

[Suyash2527]

Bug: initialScale: 0 in Viewport Config Renders the Entire Site Unreadable on Mobile

📋 Issue Description

The root layout file app/layout.tsx exports a viewport configuration with initialScale: 0. This is a critical rendering bug — a zoom scale of 0 means the page is zoomed to 0% on load, making the entire site completely invisible/unreadable on every mobile browser the moment it's opened.

The correct value is initialScale: 1, which is the industry-standard default that renders the page at 100% zoom on mobile devices.

---

📍 Affected Code

File: app/layout.tsx — lines 24–29

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 0,    // ❌ Renders page at 0% zoom — invisible on mobile
  maximumScale: 5,
  userScalable: true,
};

---

💥 What This Does

The viewport meta tag generated by Next.js from this config becomes:

<meta name="viewport" content="width=device-width, initial-scale=0, maximum-scale=5" />

On any mobile browser (Chrome, Safari, Firefox for Android/iOS), initial-scale=0 sets the page zoom to zero on load. The user sees a blank or microscopic page and must manually pinch-zoom in to read anything — which most users will never attempt, and which defeats the maximumScale: 5 setting anyway since they start from 0.

---

🧪 Steps to Reproduce

1. Open the site on any mobile device or use Chrome DevTools → toggle device toolbar (any phone preset)
2. Navigate to any page (/, /quiz, /sem4/os/ch1, etc.)
3. Observe the page renders completely zoomed out (near invisible) on initial load
4. Compare with initialScale: 1 — the page renders normally at readable size

---

✅ Fix

One character change in app/layout.tsx:

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,    // ✅ Standard value — renders at 100% zoom on mobile
  maximumScale: 5,
  userScalable: true,
};

This is the correct, universally-used value per the MDN viewport docs and Next.js viewport documentation.

---

🌍 Impact

Concern	Detail
Severity	🔴 Critical
Affected Pages	Every single page on the site
Affected Users	All mobile users (iOS + Android)
Behaviour	Page renders at 0% zoom — effectively blank on load
Fix Complexity	Trivial — single value change in one file

---

📎 References

• MDN — Viewport meta tag
• Next.js — generateViewport
• web.dev — Responsive web design basics

---

🏷️ Suggested Labels

bug · frontend · mobile · critical · gssoc · level1

[Naveen-Boddepalli]

Hi @pushkarscripts,
I would like to work on this bug under GSSoC'26.
please assign it to me.
Thankyou !!!