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