CSS RWD Viewport
In this page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Viewport Meta Tag
Mobile browsers default रूप से pages को एक virtual desktop-जैसी width (अक्सर 980px) पर layout करते हैं और फिर पूरे result को physical screen में fit करने के लिए scale down करते हैं, जो text को unreadably tiny बना देता है। <meta name="viewport"> tag इस default behavior को पूरी तरह override कर देता है।
- Accepted values:
- width=device-width — device width से match करता है
- initial-scale=1 — 100% zoom पर शुरू होता है
- minimum-scale | maximum-scale — zoom limits
- user-scalable=yes | no — pinch zoom allowed है या नहीं
उदाहरण: The Viewport Meta Tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
.box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
</style>
</head>
<body>
<div class="box">Overrides the default 980px desktop-width mobile layout</div>
</body>
</html>width=device-width
width=device-width set करना browser को बताता है कि device की असली physical pixel width को CSS viewport width के रूप में इस्तेमाल करे, इसलिए एक 375px-wide phone screen को आपकी CSS में 375px की तरह treat किया जाता है, किसी काल्पनिक 980px page के scaled-down हिस्से के बजाय।
- Accepted values:
- width=device-width — layout viewport device की width के बराबर है
- width=<pixels> — fixed layout width
- height=device-height — शायद ही कभी चाहिए
- नोट: लगभग हर site में width=device-width इस्तेमाल करें
उदाहरण: width=device-width
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body { font-family: sans-serif; }
.box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
</style>
</head>
<body>
<div class="box">Layout width matches the device width</div>
</body>
</html>initial-scale=1
initial-scale=1 value CSS pixels और device pixels के बीच initial zoom level को 1:1 set करती है, इसलिए page पहले से zoomed out होने के बजाय अपने असली intended size पर load होता है। इसे छोड़ देना आमतौर पर pages को device-width set होने पर भी pre-zoomed load कराता है।
- Accepted values:
- initial-scale=1 — कोई zoom नहीं, 100%
- initial-scale=<number> — starting zoom level
- minimum-scale=<number> — सबसे कम zoom
- maximum-scale=<number> — सबसे ज़्यादा zoom
उदाहरण: initial-scale=1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
.box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
</style>
</head>
<body>
<div class="box">Initial zoom level is 1 (no zoom)</div>
</body>
</html>Additional Viewport Controls
दूसरी viewport properties मौजूद हैं -- maximum-scale, minimum-scale, और user-scalable=no -- लेकिन zoom को restrict करना एक accessibility anti-pattern है क्योंकि कुछ users छोटा text पढ़ने के लिए pinch-zoom पर निर्भर करते हैं, इसलिए इन्हें कम मात्रा में इस्तेमाल किया जाना चाहिए अगर बिल्कुल भी।
- Accepted values:
- user-scalable=yes | no — pinch zoom की अनुमति दें
- maximum-scale=<number> — सबसे ज़्यादा zoom
- minimum-scale=<number> — सबसे कम zoom
- viewport-fit=cover — notched displays में extend करता है
- नोट: accessibility के लिए user-scalable=no से बचें
उदाहरण: Additional Viewport Controls
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body { font-family: sans-serif; }
.box { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 16px; }
</style>
</head>
<body>
<div class="box">user-scalable=no blocks pinch zoom (avoid: hurts accessibility)</div>
</body>
</html>एक Missing Viewport Tag Debug करना
सही responsive CSS वाला लेकिन कोई viewport tag न वाला page फिर भी असली devices पर टूटा हुआ दिखेगा -- classic symptom है एक page जो desktop DevTools के mobile emulator में perfect दिखता है (जो viewport automatically set करता है) लेकिन असली phone पर tiny और zoomed-out।
उदाहरण: Debugging a Missing Viewport Tag
<!-- Without a viewport tag: looks correct in desktop DevTools' mobile emulator, but tiny and zoomed-out on a real phone -->
<!DOCTYPE html>
<html>
<head>
<title>Page missing a viewport tag</title>
<style>
.box { background: #ffd6d6; border: 2px solid #d33; padding: 16px; font-family: sans-serif; }
</style>
</head>
<body>
<div class="box">No viewport meta: phones render this at ~980px and shrink it</div>
</body>
</html><meta name="viewport" content="width=device-width, initial-scale=1">छोड़ देना, इसलिए phones लगभग 980px पर render करते हैं।maximum-scale=1याuser-scalable=noset करना, जो users को zoom करने से रोकता है।- viewport meta tag को
headके बजायbodyमें डालना।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: