व्यूपोर्ट मेटा टैग के बिना, मोबाइल डिवाइस, पेजों को डेस्कटॉप स्क्रीन की सामान्य चौड़ाई के हिसाब से रेंडर करते हैं. इसके बाद, पेजों को छोटा कर देते हैं, जिससे उन्हें पढ़ना मुश्किल हो जाता है.
व्यूपोर्ट मेटा टैग सेट करने से, व्यूपोर्ट की चौड़ाई और उसे छोटा-बड़ा करने की सुविधा को कंट्रोल किया जा सकता है. इससे व्यूपोर्ट को सभी डिवाइसों पर सही साइज़ में दिखाया जा सकता है.
Lighthouse व्यूपोर्ट मेटा टैग ऑडिट के फ़ेल होने की वजह
Lighthouse, व्यूपोर्ट मेटा टैग के बिना वाले पेजों को फ़्लैग करता है:
कोई पेज ऑडिट तब तक पास नहीं करता, जब तक ये सभी शर्तें पूरी न हो जाएं:
- दस्तावेज़ के <head> में <meta name="viewport"> टैग शामिल हो.
- व्यूपोर्ट मेटा टैग में content एट्रिब्यूट शामिल है.
- content एट्रिब्यूट की वैल्यू में width= टेक्स्ट शामिल है.
व्यूपोर्ट मेटा टैग जोड़ने का तरीका
अपने पेज के <head> में, सही की-वैल्यू पेयर वाला व्यूपोर्ट <meta> टैग जोड़ें:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
यहां बताया गया है कि हर कुंजी-वैल्यू पेयर क्या करता है:
- width=device-width व्यूपोर्ट की चौड़ाई को डिवाइस की चौड़ाई पर सेट करता है.
- initial-scale=1, उपयोगकर्ता के पेज पर आने पर ज़ूम का शुरुआती लेवल सेट करता है.
शुरुआती स्केल 1 से कम है
अगर initial-scale को 1 से कम पर सेट किया जाता है, तो इससे ब्राउज़र, ज़ूम करने के लिए दो बार टैप करने की सुविधा चालू कर सकते हैं. आम तौर पर, इस सुविधा का इस्तेमाल उन डेस्कटॉप साइटों के लिए किया जाता है जिन्हें मोबाइल के लिए ऑप्टिमाइज़ नहीं किया गया है. इससे टैप करने पर होने वाली किसी भी गतिविधि में 300 मिलीसेकंड की देरी हो जाती है. ऐसा तब होता है, जब ब्राउज़र यह जांच कर रहा होता है कि दूसरा "डबल" टैप हुआ है या नहीं. इसलिए, initial-scale को 1 से कम पर सेट करने पर भी ऑडिट पूरा नहीं होता.