डेस्कटॉप और मोबाइल दोनों का समर्थन करने वाले एकल JQuery पृष्ठ के लिए टिप्स?

Question

मेरे पास वर्तमान में एक ऐसी साइट है जो एक पृष्ठ होस्ट करती है जिसे मैं डेस्कटॉप और मोबाइल ब्राउज़र दोनों की सेवा करना चाहता हूं। डेस्कटॉप डिज़ाइन और कार्यान्वयन पहले ही पूरा हो चुका है और JQuery का उपयोग करता है।

मुझे यह पृष्ठ एक अलग लेआउट का उपयोग करने के लिए अच्छा लगेगा जब कोई उपयोगकर्ता JQuery मोबाइल द्वारा समर्थित मोबाइल ब्राउज़र पर जाता है।

मैं ऐसा करने का सबसे अच्छा तरीका जानने की कोशिश कर रहा हूं लेकिन इसके लिए सर्वोत्तम प्रथाओं पर जानकारी नहीं मिल रहा है। इस पर लगता है कि सभी मौजूदा दस्तावेज/मार्गदर्शिकाएं मुझे लगता है कि जो jQuery पृष्ठ आप लिख रहे हैं वह विशेष रूप से मोबाइल ब्राउज़र का समर्थन कर रहा है, इसलिए डेस्कटॉप के लिए स्वरूपण को संबोधित नहीं करता है।

विकल्प है कि स्पष्ट प्रतीत:

1. एक ही पेज लेकिन मौजूदा सामग्री मोबाइल
2. एक ही पृष्ठ के लिए लेकिन addtional मार्कअप के साथ पुन: प्रारूपित करना है कि डुप्लिकेट मौजूदा सामग्री है, लेकिन स्वरूपित किया गया है के शीर्ष पर सिर्फ अतिरिक्त मार्कअप मोबाइल के लिए यदि डेस्कटॉप ब्राउज़र, गैर-मोबाइल सामग्री छुपा/प्रस्तुत नहीं किया गया है।
3. से कुछ गतिशील पता लगाने मोबाइल बनाम गैर-मोबाइल तो 2 अलग पृष्ठों (डेस्कटॉप बनाम मोबाइल)

मुझे लगता है कि # 2 शायद सबसे आसान है, लेकिन मैं डुप्लीकेट का विचार पसंद नहीं है के बीच के मार्ग पेज में सामग्री। # 1 यह सोचने के लिए अवास्तविक लगता है कि मैं अपनी मौजूदा सामग्री को मार्कअप के समूह के साथ बढ़ा सकता हूं ताकि यह जादू के लिए प्रारूप हो (यह अभी भी डेस्कटॉप का समर्थन कर रहा हो)।

मैं किसी भी गाइड के लिए किसी भी सुझाव और पॉइंटर्स की सराहना करता हूं जो कि सर्वोत्तम प्रथाओं के बारे में बात कर सकता है।

स्पष्टीकरण: मैं रेल, ASP.NET MVC का उपयोग नहीं मान लें, आदि

Answer 1

सीएसएस मीडिया के प्रश्नों इस के लिए महान हैं। (सावधान रहें, वे CSS3 हैं) देखने वाले एजेंट के आकार के आधार पर (और यह गतिशील रूप से अपडेट हो जाता है!) कुछ सामग्री छुपा या प्रदर्शित की जा सकती है, जिससे मूल रूप से आपके विकल्प # 1 और # 2 का एक मोर्फ़ बन जाता है। डेस्कटॉप के लिए आपके पास एक बड़ा पूर्ण फीचर्ड लेआउट होगा, जिसमें स्टाइल और jQuery है, और जब स्क्रीन छोटी है (यानी यह एक फोन है या अपने ब्राउजर का आकार बदल रहा है) तो आप कुछ अधिक विस्तृत सामान छिपाते हैं और कुछ चीजें आराम करते हैं और शायद कुछ और चीजें प्रदर्शित करें। यहां मीडिया क्वेरीज़ के बारे में पढ़ें: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html संपादित करें: बस स्पष्ट करने के लिए, आप मीडिया प्रश्नों के साथ तत्वों को पूरी तरह से अनुकूलित कर सकते हैं, इसलिए डेस्कटॉप आकार पर, एक div में एक बिंदीदार सीमा, गोलाकार कोनों, 10 पीएक्स पैडिंग आदि हो सकते हैं, जबकि डिवीजन में 1 पीएक्स पैडिंग, ठोस सीमा इत्यादि है।

Answer 2

मुझे यकीन है कि आप इस मुद्दे से पहले हैं, क्योंकि यह सवाल कुछ महीने पुराना है, लेकिन मैंने सोचा कि मैं जो पेशकश करूँगा एक ही प्रकार के मुद्दे के लिए काम कर रहे हैं।

समस्या: मुझे ऐसी साइट चाहिए जो मोबाइल डिवाइस, टैबलेट और बड़ी और छोटी डेस्कटॉप स्क्रीन पर स्वीकार्य है।

समाधान:

• सीएसएस मीडिया क्वेरी पेज के पैमाने और उपयोगकर्ता की व्यूपोर्ट में "प्रतिक्रिया" जाने के लिए स्वाभाविक पसंद हैं। अभी एक बड़ा धक्का है और उत्तरदायी डिजाइन, उत्तरदायी छवियों आदि के बारे में कुछ रोचक वार्ताएं हैं। मैं मोबाइल के लिए पहले (एक और धक्का) डिजाइन कर रहा हूं और लेआउट/देखने योग्य सामग्री को बदलने के लिए मीडिया प्रश्नों का उपयोग कर रहा हूं क्योंकि स्क्रीन बड़ी हो जाती है।

• बड़ी समस्या तब जावास्क्रिप्ट के साथ आता है। यदि मैं मोबाइल जेएस फ्रेमवर्क का उपयोग करता हूं, तो उसे मेरे डेस्कटॉप संस्करण के साथ भी शामिल किया जाएगा - आदर्श नहीं। अगर मैं दोनों पर jQuery का उपयोग करता हूं, तो मुझे अपने मोबाइल संस्करण में बहुत अधिक बैंडविड्थ मिलती है जो कि मेरे पास नहीं है। मैंने आधुनिकता के नए मीडिया प्रश्न परीक्षण के साथ स्क्रीन आकार के आधार पर स्क्रिप्ट लोड करने की अनुमति देने के लिए Modernizr का उपयोग करने का निर्णय लिया है। इसने मुझे एक पेज रखने और मोबाइल/टैबलेट/या डेस्कटॉप के लिए गुणवत्ता बलि किए बिना विभिन्न स्क्रीन आकारों में सेवा करने की अनुमति दी है। एक साधारण modernizr मीडिया क्वेरी की जांच के नीचे है:

if (Modernizr.mq('only screen and (max-width: 480px)')) { 
    Modernizr.load('/mobile.js'); 
} else if (Modernizr.mq('only screen and (max-width: 768px)')) { 
    Modernizr.load('/tablet.js'); 
} else { 
    Modernizr.load('/desktop.js'); 
}