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