उत्तरदायी वेबसाइट ने मोबाइल पर पूरी चौड़ाई तक ज़ूम किया

Question

मैं बूटस्ट्रैप जवाबदेही नावबार का परीक्षण कर रहा हूं और मेरे पास एक डेमो वेबसाइट है। जब मैं एक डेस्कटॉप पर ब्राउज़र का आकार बदलता हूं, तो यह सभी नेवी बार सहित ठीक काम करता है जो शीर्ष पर एक छोटे आइकन के साथ बंधनेवाला मेनू बन जाता है जिसे मैं अधिक मेनू बटन देखने के लिए क्लिक कर सकता हूं।

लेकिन जब मैंने इसे मोबाइल ब्राउज़र से आज़माया (मैंने इसे एंड्रॉइड पर क्रोम और इंटरनेट ब्राउज़र पर आज़माया), तो मैंने उत्तरदायी डिज़ाइन नहीं देखा। मैं केवल वेबसाइट जैसे डेस्कटॉप का बहुत छोटा संस्करण देख सकता था।

क्या कोई इंगित कर सकता है कि मैं क्या गलत कर रहा हूं?

Answer 1

इसे अपने HTML सिर पर जोड़ें ..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

यह छोटे डिवाइस ब्राउज़रों को बताता है कि पेज को कैसे स्केल किया जाए। आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Comments

मैंने इस कोड को हेड सेक्शन में जोड़ा है, लेकिन इसके एंड्रॉइड के मेरे डिफ़ॉल्ट इंटरनेट एक्सप्लोरर के लिए काम नहीं कर रहा है - आप www.freerechargeapp.com/index.html

— santosh

मुझे वास्तव में समझ नहीं आ रहा है कि मेरे लिए काम क्यों नहीं कर रहा है। एक वेबसाइट में काम नहीं करता है और दूसरी वेबसाइट में नहीं है। और कोड संरचना ताजा बूटस्ट्रैप के साथ समान है

— bheatcoker

@Skelly - अन्य उत्तर जिन्हें मैंने छोड़ दिया है maximum-scale, और 1.0इसके बजाय उपयोग किया है 1। क्या आपको पता है कि इन चीजों से फर्क पड़ता है?

— वनबरी

आपने मुझे बचाया :) धन्यवाद।

— फतह

धन्यवाद दो साल बाद भी आपकी पोस्ट अभी भी shiznizzle (sic।) Wal

— Walt

Answer 2

जैसा कि यहाँ सुझाया गया है ।

<meta name="viewport" content="initial-scale=1">

एक और भी बेहतर विकल्प होगा क्योंकि यह पोर्ट्रेट से लैंडस्केप तक जा रहा है और संभव ऑटो-स्केलिंग के कारण स्वाभाविक रूप से अपनाए जाने वाले / अधिक ऊंचाई वाले उपयोगकर्ता अनुभव को वापस लाएगा।

Comments

धन्यवाद, यह iPhone पर स्केलिंग मुद्दा तय किया, और चित्र और परिदृश्य अलग ढंग से (और सही ढंग से) प्रदर्शित करता है।

— SexxLuthor

Answer 3

इस त्रुटि को खोज रहे लोगों के लिए जोड़ना, जिनके लिए स्वीकृत उत्तर काम नहीं कर रहा है। मेरा मानना ​​है कि यह एक दुर्लभ, लेकिन फिर भी निराशाजनक मामला होगा:

यदि आपका पृष्ठ किसी फ़्रेमसेट (उदाहरण के लिए डोमेन क्लोकिंग) के अंदर रेंडर कर रहा है, तो मेटा टैग लगाने से मदद नहीं मिलेगी। आपको उन्हें क्लोकिंग डोमेन पर पेज में डालने की आवश्यकता होगी, जिसे आप अपने DNS होस्ट के आधार पर एक्सेस कर सकते हैं या नहीं कर सकते हैं।

Answer 4

अपने ब्राउज़र का कैश साफ़ करने का प्रयास करें और पृष्ठ को एक ताज़ा टैब में खोलें। जब भी ऐसा होता है यह मेरे लिए कभी-कभी इस मुद्दे को हल कर देता है।