मोबाइल पर एलिमेंटर टैब: कुचली हुई पट्टी को ठीक करें

कुंजी तकिए

• 1,200px डेस्कटॉप कॉलम में फिट होने वाले चार टैब शीर्षकों में फोन पर लगभग 390px होता है, इसलिए वे लपेटते हैं, स्क्वैश करते हैं या ओवरफ्लो करते हैं।
• एलिमेंट के टैब्स विजेट में एक ब्रेकपॉइंट कंट्रोल होता है जो आपके द्वारा चुनी गई चौड़ाई के नीचे एक ऊर्ध्वाधर समझौते के लिए पट्टी को स्विच करता है मोबाइल डिफ़ॉल्ट है।
• क्षैतिज स्क्रॉल दूसरा विकल्प है: शीर्षक एक पंक्ति में रहते हैं और आगंतुक उनके माध्यम से स्वाइप करते हैं।
• द मास्टर ऐडऑन टैब्स विजेट एक फोन पर एक पूर्ण चौड़ाई वाले कॉलम में अपने शीर्षकों को ढेर करता है, नीचे खुले पैनल के साथ यह पठनीय है, लेकिन यह एक अकॉर्डियन नहीं है।
• तीन या कम छोटे शीर्षक आमतौर पर एक फोन से अछूता रहते हैं अतीत कि, अकॉर्डियन उठाओ या जानबूझकर स्क्रॉल करें।

टैब एक डेस्कटॉप पैटर्न हैं वे कई शीर्षकों के लिए क्षैतिज कमरे और एक पैनल मानते हैं, और एक फोन में उस चौड़ाई का लगभग एक तिहाई है।

एलिमेंटर आपको दो तरीके देता है, और एडऑन विजेट फिर से अलग व्यवहार करते हैं नीचे दिए गए फोन स्क्रीनशॉट एक वास्तविक परीक्षण पृष्ठ के ३९० पीएक्स कैप्चर हैं, इसलिए आप जो देखते हैं वह सेटिंग क्या करता है।

क्या गलत हो जाता है

एक टैब पट्टी एक पंक्ति चाहता है यह कम चौड़ाई देता है शीर्षकों की जरूरत है और आप तीन परिणामों में से एक प्राप्त करते हैं, उनमें से कोई भी अच्छा नहीं हैः

• शीर्षक दूसरी और तीसरी पंक्ति पर लपेटते हैं, और पट्टी एक पट्टी के रूप में पढ़ना बंद कर देती है।
• इसके बजाय वे तब तक स्क्वैश करते हैं, जब तक कि प्रत्येक लेबल अपठनीय पाठ के कुछ पिक्सेल न हो जाए।
• या आखिरी वाला किनारे से बह जाता है, आमतौर पर अपने साथ एक क्षैतिज पृष्ठ स्क्रॉलबार लाता है।

लक्ष्य टैप करें इसे बदतर बनाते हैं टच दिशानिर्देश लगभग ४४ पीएक्स पर एक आरामदायक लक्ष्य डालते हैं, और एक स्क्वैश शीर्षक उस के तहत अच्छी तरह से है, इसलिए लोग पड़ोसी को याद करते हैं और मारते हैं।

विकल्प 1: अकॉर्डियन पर स्विच करें

यह वह व्यवहार है जो अधिकांश लोग चाहते हैं, और टैब्स विजेट इसे सीएसएस के बिना करता है।

1. टैब विजेट का चयन करें और सामग्री टैब में अतिरिक्त सेटिंग्स खोलें।
2. ब्रेकपॉइंट को चौड़ाई में सेट करें जहां पट्टी को छोड़ना चाहिए मोबाइल डिफ़ॉल्ट है और आमतौर पर सही उत्तर है; जब शीर्षक लंबे होते हैं तो टैबलेट समझ में आता है।

उस चौड़ाई के नीचे, प्रत्येक शीर्षक सीधे अपने स्वयं के पैनल के ऊपर बैठता है और एक टैप करने से यह खुलता है प्रति पंक्ति एक शीर्षक का मतलब है कि एक पूर्ण चौड़ाई वाला टैप लक्ष्य, और सामग्री ढह जाती है ताकि पृष्ठ लंबा न हो।

विकल्प 2: स्ट्रिप को स्क्रॉल करने दें

क्षैतिज स्क्रॉल चालू करें और शीर्षक किसी भी चौड़ाई पर एक पंक्ति में रहें, पंक्ति बग़ल में स्क्रॉल हो रही है आगंतुक स्क्रीन से दूर वाले तक पहुंचने के लिए इसके साथ स्वाइप करें।

यह एक पट्टी के अनुरूप है जो एक अनुक्रम के रूप में पढ़ता है, जैसे महीने या आकार, जहां आदेश को दृश्यमान रखना एक बार में हर विकल्प को देखने से अधिक मायने रखता है इसकी कमजोरी खोज है: एक आगंतुक जो यह नहीं देखता है कि पंक्ति स्क्रॉल कभी भी बाद के टैब को किनारे पर दिखाई देने वाले अगले शीर्षक आधे को छोड़ने में मदद करता है, क्योंकि कट-ऑफ लेबल स्वाइप करने का एक स्पष्ट निमंत्रण है।

स्क्रॉल और अकॉर्डियन ब्रेकप्वाइंट परस्पर अनन्य नहीं हैं, इसलिए यदि आप दोनों सेट करते हैं, तो तय करें कि आप वास्तव में ब्रेकप्वाइंट के नीचे कौन सा चाहते हैं और फोन पर परिणाम की जांच करें।

ऐडऑन टैब एक फोन पर क्या करते हैं

मास्टर एडॉन्स विजेट स्टैकिंग द्वारा संकीर्ण स्क्रीन को संभालता है: शीर्षक एक पूर्ण-चौड़ाई वाला कॉलम बन जाता है और खुला पैनल पूरी सूची के नीचे बैठता है।

प्रत्येक शीर्षक को एक पूर्ण चौड़ाई वाला टैप लक्ष्य मिलता है, जो स्क्वैशिंग को हल करता है यह प्रत्येक शीर्षक को अपने स्वयं के पैनल के साथ नहीं जोड़ता है, इसलिए छह या सात टैब के साथ एक आगंतुक किसी भी सामग्री तक पहुंचने से पहले पूरी सूची को स्क्रॉल करता है।

व्यावहारिक नियम: तीन या चार टैब वाले फोन पर ऐडऑन ठीक है, और अधिक होने पर ब्रेकप्वाइंट वाला कोर विजेट बेहतर होता है।

किस पेज के लिए कौन सा विकल्प

जब मोबाइल पर टैब काम करना बंद कर देते हैं

मोबाइलंबाल पर काम नहीं कर रहे “टैब्स आमतौर पर चार चीजों में से एक बन जाते हैंः

• एक होवर प्रभाव होवर टच स्क्रीन पर मौजूद नहीं है, इसलिए होवर पर स्विच करने के लिए एक टैब सेट को एक टैप की आवश्यकता होती है, कभी-कभी दो फोन ट्रैफ़िक के साथ किसी भी पृष्ठ पर क्लिक करने के लिए प्रभाव सेट करें।
• कैश्ड सीएसएस ब्रेकपॉइंट बदलने के बाद, एलिमेंट के सीएसएस को पुनर्जीवित करें और पेज कैश को साफ़ करें, या फोन पुरानी स्टाइलशीट की सेवा करता रहता है।
• एक स्थगित स्क्रिप्ट आक्रामक जावास्क्रिप्ट स्थगन टैब स्क्रिप्ट को वापस रखता है जब तक कि आगंतुक पृष्ठ के साथ बातचीत नहीं करता है, इसलिए पहला टैप कुछ भी नहीं करता है अनुकूलन प्लगइन में विजेट की स्क्रिप्ट को बाहर करें।
• एक नल लक्ष्य जो बहुत छोटा है कुछ भी नहीं टूटा है, शीर्षक सिर्फ अंगूठे से छोटा है, और अकॉर्डियन ब्रेकपॉइंट इसे ठीक करता है।

अक्सर पूछे जाने वाले प्रश्न

अंतिम विचार

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

संबंधित पढ़ने

• टैब विजेट
• एलिमेंटर में टैब कैसे बनाएं
• एलिमेंट नेस्टेड टैब समझाया
• एलिमेंटर में वर्टिकल टैब कैसे बनाएं
• उन्नत अकॉर्डियन विजेट