व्यूपोर्ट मेटा टैग के बिना, मोबाइल डिवाइस डेस्कटॉप की सामान्य चौड़ाई में पेजों को रेंडर करते हैं. इसके बाद, पेजों को छोटा करके, उन्हें पढ़ना मुश्किल बना देते हैं.
व्यूपोर्ट मेटा टैग को सेट करके, व्यूपोर्ट की चौड़ाई और स्केलिंग को कंट्रोल किया जा सकता है, ताकि सभी डिवाइस पर इसका साइज़ सही तरीके से हो.
लाइटहाउस व्यूपोर्ट मेटा टैग ऑडिट कैसे काम नहीं करता है
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 मिलीसेकंड की देरी हो जाती है. हालांकि, अगर ब्राउज़र यह देखने के लिए इंतज़ार करता है कि दूसरा "डबल" टैप हुआ है या नहीं. इसलिए, शुरुआती स्केल 1 से कम पर सेट होने पर भी ऑडिट नहीं हो पाता है.