कुंजी तकिए
- एक एलिमेंटर रिस्पॉन्सिव टेबल फोन पर तीन पैटर्न में से एक का उपयोग करती है: कार्ड में खड़ी पंक्तियाँ, टेबल के अपने बॉक्स के अंदर एक साइड स्क्रॉल, या कम कॉलम।
- पांच-स्तंभ तालिका को पठनीय रहने के लिए लगभग ६४० पीएक्स चौड़ाई की आवश्यकता होती है, और अधिकांश फोन ३६० पीएक्स और ४३० पीएक्स के बीच दिखाते हैं, इसलिए जब तक आप एक पैटर्न नहीं चुनते हैं, तब तक एक विस्तृत तालिका ओवरफ्लो हो जाती है।
- मास्टर ऐडऑन डायनेमिक टेबल विजेट रिस्पॉन्सिव टेबल के समय प्रत्येक पंक्ति को 768px चौड़े डिवाइस पर एक कार्ड में रखता है? चालू है, डिफ़ॉल्ट कौन सा है।
- क्षैतिज स्क्रॉल दो सीएसएस नियम लेता है: ओवरफ्लो-एक्स को एक रैपर पर ऑटो पर सेट किया जाता है और इसके अंदर टेबल पर एक मिनट की चौड़ाई होती है।
- टेबलप्रेस में प्रत्येक तालिका की सेटिंग्स में एक क्षैतिज स्क्रॉलिंग चेकबॉक्स होता है, और यह डिफ़ॉल्ट रूप से बंद होता है।
एक एलिमेंटर उत्तरदायी तालिका वह है जो फोन पर पठनीय रहती है, और टेबल खुद से ऐसा नहीं करते हैं कॉलम को फोन की तुलना में अधिक चौड़ाई की आवश्यकता होती है, इसलिए तालिका आमतौर पर स्क्रीन के दाईं ओर से बाहर निकलती है।
इससे निपटने के तीन तरीके हैं हमने एलिमेंटर ४.३ पर तीनों का निर्माण किया और उन्हें ३९० पीएक्स वाइड फोन स्क्रीन पर जांचा।
विषय-सूची
मोबाइल पर टेबल क्यों टूटते हैं
एक टेबल अपने कॉलम को उस तरह से लपेट नहीं सकता है जिस तरह से एलिमेंट कंटेनर की एक पंक्ति कर सकती है प्रत्येक कॉलम को दूसरों के बगल में बैठना पड़ता है, और प्रत्येक को अपने सबसे लंबे शब्द के लिए कमरे की आवश्यकता होती है हमारी पांच-कॉलम शिपिंग टेबल लगभग ६४० पीएक्स पर आरामदायक है ३९० पीएक्स फोन पर ब्राउज़र कॉलम को निचोड़ता है जब तक कि शब्द तीन लाइनों को गहरा नहीं करते हैं, और फिर आखिरी कॉलम किनारे से गिर जाता है।
एलिमेंटर के स्वयं के उत्तरदायी नियंत्रण यहां बहुत मदद नहीं करते हैं आप प्रति डिवाइस एक पूरे विजेट को छिपा सकते हैं या इसकी चौड़ाई बदल सकते हैं, लेकिन आप एक तालिका के अंदर नहीं पहुंच सकते हैं और इसकी कोशिकाओं को पुनर्व्यवस्थित कर सकते हैं।
तीन उत्तरदायी तालिका पैटर्न
प्रत्येक पैटर्न की एक लागत होती है।
| पैटर्न | आगंतुक क्या देखता है | लिए सर्वश्रेष्ठ | लागत |
|---|---|---|---|
| पंक्तियों को कार्डों में ढेर करें | प्रति पंक्ति एक कार्ड, बाईं ओर लेबल | पंक्तियाँ एक समय में एक पढ़ती हैं: समय सारिणी, विशिष्ट शीट, मूल्य सूचियाँ | पंक्तियों में एक कॉलम की तुलना करना कठिन है |
| क्षैतिज स्क्रॉल | सामान्य तालिका, बग़ल में स्वाइप की गई | एक कॉलम के नीचे मूल्यों की तुलना करना | कॉलम तब तक छिपे रहते हैं जब तक विज़िटर स्वाइप नहीं करता |
| कॉलम छुपाएं | कुंजी स्तंभों के साथ एक छोटी तालिका | एक या दो वैकल्पिक कॉलम वाली तालिकाएँ | फ़ोन विज़िटर वह डेटा खो देते हैं |
पैटर्न १: कार्ड में पंक्तियों को ढेर करें
स्टैकिंग प्रत्येक पंक्ति को एक छोटे कार्ड में बदल देता है हेडर पंक्ति गायब हो जाती है और प्रत्येक सेल अपने कॉलम नाम को एक लेबल के रूप में दिखाता है कुछ भी छिपा नहीं है और कोई भी बग़ल में स्क्रॉल नहीं करता है, इसलिए यह सबसे सुरक्षित डिफ़ॉल्ट है।
द गतिशील तालिका विजेट एक स्विच के साथ ऐसा करता है।
- एलिमेंटर में डायनामिक टेबल विजेट का चयन करें।
- सामग्री टैब में, खोलें सेटिंग्स.
- छोड़ देना उत्तरदायी तालिका? हाँ पर सेट करें। यह डिफ़ॉल्ट रूप से चालू है।
- फ़ोन पर पेज खोलें। 768px तक चौड़े उपकरणों पर पंक्तियाँ ढेर हो जाती हैं।
स्टैकिंग नियम डिवाइस की चौड़ाई की जांच करता है, इसलिए डेस्कटॉप ब्राउज़र विंडो को सिकोड़ने से यह ट्रिगर नहीं होगा एक वास्तविक फोन पर या डिवाइस अनुकरण के साथ परीक्षण करें यदि आप स्टाइल टैब में बड़े सेल पैडिंग सेट करते हैं, तो जांचें कि लेबल और मान फोन पर एक साथ बहुत करीब नहीं बैठते हैं।
सीएसएस के बिना ढेर वाली मेज चाहते हैं? द गतिशील टेबल विजेट रिस्पॉन्सिव टेबल स्विच शुरू से ही चालू है।
पैटर्न 2: क्षैतिज स्क्रॉल
क्षैतिज स्क्रॉल तालिका को वैसे ही रखता है जैसे वह है और आगंतुक को अपने बॉक्स के अंदर बग़ल में स्वाइप करने देता है पृष्ठ स्वयं बग़ल में स्क्रॉल नहीं करता है इसका उपयोग तब करें जब लोगों को किसी कॉलम को पढ़ने की आवश्यकता हो, जैसे कि कीमतों की तुलना करना।
एलिमेंट के एचटीएमएल विजेट में एक एचटीएमएल तालिका के लिए, तालिका को एक डिव में लपेटें और दो नियम जोड़ेंः
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>द min-width ब्राउज़र को कॉलम को कुचलने से रोकता है, और overflow-x: auto स्क्रॉल को केवल तभी जोड़ता है जब स्क्रीन उससे संकरी हो। प्रति सेल एक लाइन पर रहने के लिए आपकी टेबल को जिस भी चौड़ाई की आवश्यकता हो, उसमें 640px बदलें।
कमजोरी यह है कि कुछ भी आगंतुक को नहीं बताता है कि सही करने के लिए अधिक है एक स्तंभ जो आधे में काटा जाता है, जैसा कि स्क्रीनशॉट में, सबसे अच्छा संकेत है जो आप दे सकते हैं, इसलिए न्यूनतम चौड़ाई को एक मूल्य पर सेट न करें जो बिल्कुल एक स्तंभ किनारे पर समाप्त होता है।
पैटर्न ३: कॉलम छुपाएं
कभी-कभी एक कॉलम डेस्कटॉप पर अच्छा होता है और फोन पर अनावश्यक होता है इसे ब्रेकपॉइंट के नीचे छिपाएं और तालिका बिना किसी अन्य परिवर्तन के फिट हो सकती है।
प्रत्येक में एक वर्ग जोड़ें th और td कॉलम में आप खो सकते हैं, फिर उस वर्ग को छोटी स्क्रीन पर छिपा सकते हैंः
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>यहाँ hide-cols टेबल पर ही एक वर्ग है ७६७ पीएक्स एलिमेंट के डिफ़ॉल्ट मोबाइल ब्रेकपॉइंट है, इसलिए कॉलम टैबलेट पर वापस आते हैं।
केवल छुपाएं कि एक फोन आगंतुक बिना क्या कर सकता है यदि छिपा हुआ कॉलम तय करता है कि कोई खरीदता है, स्टैकिंग या स्क्रॉलिंग का उपयोग करता है।
एलिमेंटर में उत्तरदायी टेबलप्रेस टेबल
एलिमेंटर में रखी गई एक टेबलप्रेस तालिका किसी भी अन्य तालिका की तरह व्यवहार करती है: व्यापक लोग अतिप्रवाह करते हैं फिक्स टेबलप्रेस सेटिंग्स में रहता है।
- को जा टेबलप्रेस और तालिका को संपादित करें।
- को स्क्रॉल साइट आगंतुकों के लिए तालिका विशेषताएं.
- टिक क्षैतिज स्क्रॉलिंग. यह डिफ़ॉल्ट रूप से बंद है।
- क्लिक करें परिवर्तन सहेजें.
हमारे परीक्षण में यह अतिप्रवाह तय किया गया: तालिका अपने बॉक्स के अंदर स्क्रॉल की गई और पृष्ठ अभी भी बना रहा टेबलप्रेस में फोन के लिए स्टैकिंग और ढहने वाले मोड भी हैं, और वे इसके भुगतान किए गए उत्तरदायी तालिकाओं सुविधा का हिस्सा हैं।
एक त्वरित मोबाइल चेकलिस्ट
- एक वास्तविक फोन पर पृष्ठ खोलें एमुलेटर टच स्क्रॉलिंग और कुछ डिवाइस-चौड़ाई नियमों को याद करते हैं।
- पृष्ठ को बग़ल में स्क्रॉल करें यदि पूरा पृष्ठ चलता है, तो तालिका ओवरफ्लो हो रही है।
- हेडर टेक्स्ट को छोटा रखें। “फ्री ओवर”, ओवर” ऑर्डर पर “फ्री डिलीवरी से बेहतर रैप करता है।
- सबसे महत्वपूर्ण कॉलम पहले रखो यह वह है जो टेबल स्क्रॉल होने पर दिखाई देता रहता है।
- कोशिकाओं में १६ पीएक्स बॉडी टेक्स्ट के लिए लक्ष्य एक तालिका में फिट करने के लिए फ़ॉन्ट को सिकोड़ने से यह अपठनीय हो जाता है।
अक्सर पूछे जाने वाले प्रश्न
मैं एलिमेंट में टेबल को कैसे उत्तरदायी बना सकता हूं?
तीन पैटर्न में से एक चुनें पंक्तियों को एक टेबल विजेट के साथ कार्ड में ढेर करें जो इसे समर्थन करता है, जैसे कि डायनामिक टेबल ऑटो के लिए ओवरफ्लो-एक्स सेट के साथ एक डीआईवी में एक एचटीएमएल टेबल लपेटें ताकि यह बग़ल में स्क्रॉल हो या सीएसएस मीडिया क्वेरी के साथ ७६७ पीएक्स के नीचे वैकल्पिक कॉलम छुपाएं।
मोबाइल पर मेरी एलिमेंटर टेबल क्यों काट दी जाती है?
तालिका स्क्रीन से अधिक व्यापक है और कुछ भी यह नहीं बताता है कि कैसे अनुकूलित किया जाए टेबल्स कॉलम लपेट नहीं सकते हैं, इसलिए अतिरिक्त चौड़ाई किनारे से पहले फैल जाती है एक स्क्रॉल रैपर जोड़ें, अपने टेबल विजेट में स्टैकिंग विकल्प चालू करें, या छोटी स्क्रीन पर एक कॉलम निकालें।
क्या मैं एलिमेंट में क्षैतिज रूप से एक टेबल स्क्रॉल कर सकता हूं?
हाँ। HTML तालिका के लिए, इसे ओवरफ़्लो-x: ऑटो के साथ एक div के अंदर रखें और तालिका को 640px जैसी न्यूनतम-चौड़ाई दें। एक टेबलप्रेस तालिका के लिए, उस तालिका की सेटिंग्स में साइट विज़िटर के लिए तालिका सुविधाओं के अंतर्गत क्षैतिज स्क्रॉलिंग पर टिक करें।
क्या एलिमेंटर के पास एक उत्तरदायी तालिका विजेट है?
कोर प्लगइन या प्रो में एलिमेंटर का कोई टेबल विजेट नहीं है। एलिमेंटर में रिस्पॉन्सिव टेबल ऐडऑन विजेट, टेबल प्लगइन्स जैसे टेबलप्रेस, या आपके अपने सीएसएस के साथ HTML टेबल से आती हैं।
मोबाइल, स्टैकिंग या स्क्रॉलिंग पर कौन सा बेहतर है?
स्टैकिंग बेहतर है जब प्रत्येक पंक्ति अकेले खड़ी होती है, जैसे कि समय सारिणी में एक वर्ग स्क्रॉलिंग बेहतर होती है जब आगंतुक एक कॉलम के नीचे संख्याओं की तुलना करते हैं, क्योंकि स्टैक्ड कार्ड उन संख्याओं को दूर से दूर रखते हैं।
अंतिम विचार
एलिमेंटर रिस्पॉन्सिव टेबल बनाने के लिए, तय करें कि फोन विज़िटर को इससे क्या चाहिए। जब प्रत्येक पंक्ति को अकेले पढ़ा जाए तो पंक्तियों को स्टैक करें, कॉलम की तुलना करने पर स्क्रॉल करें और केवल डेटा वैकल्पिक होने पर कॉलम छिपाएं।
यदि आप सीएसएस नहीं लिखना चाहेंगे, तो गतिशील तालिका पैनल में एक स्विच से स्टैकिंग पैटर्न को संभालता है।
संबंधित पढ़ने
