पाठ 2 / 26

Viewport और meta tags

Viewport meta tag के साथ browsers को बताएँ कि मोबाइल पर आपके page को कैसे render करना है — responsive design का पहला step।

Viewport महत्वपूर्ण क्यों है

डिफ़ॉल्ट रूप से, mobile browsers एक desktop-width viewport (~980px) मानते हैं और zoom out करते हैं। Viewport meta tag के बिना, आपका responsive CSS अपेक्षित तरीके से काम नहीं करेगा। Tag browser को device width से मेल खाने के लिए बताता है।

आवश्यक viewport tag

इसे हमेशा अपने <head> में रखें। यह mobile browsers को device width और 1:1 initial scale उपयोग करने को कहता है, और users के लिए pinch-zoom चालू रखता है।

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Other meta tags -->
  <meta charset="UTF-8">
  <meta name="description" content="Page description">
</head>

आम गलतियाँ

❌ Viewport tag को पूरी तरह छोड़ना। ❌ initial-scale=2.0 सेट करना या zoom को रोकना। ❌ Fixed viewport width जैसे width=1000px का उपयोग करना। ✓ हमेशा width=device-width, initial-scale=1.0 का उपयोग करें।