2016-04-13 4 views
14

मैंने व्यूपोर्ट को 480px चौड़े में आकार बदलने के लिए क्रोम DevTools का उपयोग किया है, जैसा कि नीचे दिखाया गया है।क्रोम DevTools उत्तरदायी व्यूपोर्ट क्यों लगता है कि यह 980px चौड़ा है?

मैं बूटस्ट्रैप के ग्रिड लेआउट का उपयोग कर रहा हूं, इसलिए मेरे पास div.container है जिसका उपयोग मैं नीचे बाईं ओर दिखाया गया है। जब मैं इस पर होवर करता हूं, तो मुझे लगता है कि क्रोम में div चौड़ाई 750px (और पूरे body980px है) के रूप में चिह्नित है, भले ही मेरे पास स्पष्ट रूप से एक छोटे रिज़ॉल्यूशन पर स्क्रीन सेट हो। यहां तक ​​कि शीर्ष पर शासक भी दिखाता है कि यह 480px चौड़ा है।

आगे की पुष्टि के लिए, आप मीडिया क्वेरी देख सकते हैं जो कहता है कि 750 पीएक्स की चौड़ाई केवल उच्च संकल्प (न्यूनतम 768 पीएक्स) पर सेट की जानी चाहिए, इसलिए व्यूपोर्ट यह मान रहा है कि यह इसकी तुलना में अधिक चौड़ाई है।

क्या मैं गलत समझता हूं कि उत्तरदायी सुविधा का उपयोग कैसे किया जाता है?

धन्यवाद!

enter image description here

+2

क्या मूल्य आप व्यूपोर्ट के मेटाडाटा में है में शामिल किया जाना चाहिए? – Justinas

+0

क्या यह 'मेटा नाम =" व्यूपोर्ट "..> टैग है? मैंने '' की जांच की और उस नाम से कुछ भी नहीं देखा, इसलिए मुझे लगता है कि यह एक डिफ़ॉल्ट मान का उपयोग करता है? – user2490003

+0

आह, मुझे यह पृष्ठ मिला जो बताता है कि 'मेटा' टैग क्या है। जब मैंने इसे जोड़ा, तो समस्या ठीक हो गई। सुझाव के लिए धन्यवाद! https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=hi – user2490003

उत्तर

14

जवाब

के रूप में टिप्पणी में कहा गया है स्वीकार करने के लिए: आप व्यूपोर्ट कि प्रभावी करने के लिए मीडिया के प्रश्नों के लिए आवश्यक है के साथ meta टैग याद कर रहे हैं।

+0

गह! धन्यवाद धन्यवाद धन्यवाद! मैं थोड़ा पागल जाना शुरू कर रहा था ... :) – rinogo

2

जैसा ऊपर बताया गया है, HTML शीर्षलेख में मेटाटैग जोड़ने से समस्या हल हो जाएगी। नीचे व्यूपोर्ट तत्व है, जो अपने सभी वेब पृष्ठों

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
संबंधित मुद्दे