क्या उत्तरदायी वेब डिज़ाइन के लिए jQuery का उपयोग करना ठीक है?

12

मुझे इसे संवेदनशील बनाने और स्मार्ट फोन पर सही ढंग से प्रदर्शित करने के लिए एक साइट को अपडेट करने का काम सौंपा गया है। दुर्भाग्य से, अपने वर्तमान रूप में साइट के साथ काम करना बहुत आसान नहीं है - मैं सिर्फ CSS नहीं बदल सकता।

क्या ब्राउज़र आकार का पता लगाना और jQuery के साथ सीएसएस परिवर्तन करना बुरा माना जाता है?

उदाहरण के लिए:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}

— MeltingDog
स्रोत

7

आप का उपयोग करने के विचार करना चाहिए मीडिया प्रश्नों के बजाय क्योंकि यह जून 2012 के बाद से W3C द्वारा एक सिफारिश की मानक है

— Zistoloen

आप शैली की चादरें बदलने का मतलब है? मुझे लगा कि यह भी है, लेकिन मुझे अभी भी बहुत सारे तत्वों को बदलना होगा

— मेल्टडॉग

हाँ। किसी भी मामले में, मुझे लगता है कि आपके पास बहुत सीएसएस परिवर्तन होंगे।

— ज़िस्टोलोएन

2

वाक्य "मुझे इसे उत्तरदायी बनाने के लिए एक साइट को अपडेट करने का काम सौंपा गया है" का अनुसरण "मैं सिर्फ सीएसएस नहीं बदल सकता" किया जा सकता है

— फ्रांसिस्को प्रेसेनिया

4

सब कुछ और अधिक jQuery की जरूरत है ( अस्वीकरण: इसे गंभीरता से न लें )

— Darkhogg

13

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

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

स्रोत: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

फिर सीएसएस / मीडिया प्रश्नों के साथ पागल हो जाएं।

या jQuery के साथ:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

मैंने प्रतिक्रियाशील 'स्किन्स' किया है, जहां कुछ सामान बस डोम को बदले बिना संभव नहीं था। यदि आपके पास HTML तक पहुंच नहीं है, तो जेएस डोम हेरफेर कभी-कभी एकमात्र उत्तर होता है।

संपादित करें:
अपने छोटे स्क्रीन संस्करण की दृश्य आवश्यकताओं के आधार पर आप आश्चर्यचकित हो सकते हैं कि यह सीएसएस स्निपेट आपको 'मोबाइल फ्रेंडली' करने के तरीके के साथ मिलेगा।

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

यदि मूल CSS डेवलपर बहुत अधिक शौकीन था !importantऔर आप HTML में नहीं जा सकते हैं तो आप jQuery / JS का उपयोग शरीर या उच्च स्तर के कंटेनर में आईडी जोड़ने के लिए कर सकते हैं और अपने चयनकर्ता में जोड़ सकते हैं।

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }

— मर्जी
स्रोत

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

— मार्को

4

मैं कहूंगा कि पहले मीडिया के प्रश्नों का उपयोग करके देखें। एक विधि जो मुझे तब आसान लगी जब मैं मूल रूप से केवल डेस्कटॉप के लिए एक डिज़ाइन के साथ काम कर रहा था:

दो अलग स्टाइलशीट के साथ शुरू करें। नए उत्तरदायी डिजाइन के लिए एक, और पुराने डेस्कटॉप संस्करण के लिए दूसरा:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

सभी पुरानी शैलियों को Desktop.css में समाहित किया जा सकता है । इस बीच आप mobile.css में स्क्रैच से शुरू कर सकते हैं । आप पा सकते हैं कि आप उस मोबाइल CSS में एक अच्छा सिंगल कॉलम लेआउट बना सकते हैं जो टैबलेट के लिए भी काम करता है।

यह दृष्टिकोण आपको एक नई शुरुआत देता है और आप केवल मोबाइल और टैबलेट के लिए विशेष रूप से स्टाइल कर सकते हैं और इसमें डेस्कटॉप स्टाइल नहीं हैं जो सामान के माध्यम से आ रहे हैं। आप बस मोबाइल के लिए आवश्यक के रूप में छिपा सकते हैं / दिखा सकते हैं।

यदि आपको मोबाइल और डेस्कटॉप के साथ काम करने के लिए वास्तव में डेस्कटॉप कोड को बदलने की आवश्यकता है तो आप मार्कअप को फिर से पा सकते हैं। वैकल्पिक रूप से यदि आप पाते हैं कि आप उत्तरदायी और मोबाइल दोनों संस्करणों के लिए HTML को वास्तविक रूप से रिफलेक्टर नहीं कर सकते हैं तो आप डेस्कटॉप कोड जैसे क्लास "डेस्कटॉप" पर क्लास लगा सकते हैं और इसे छुपाने के लिए मोबाइल संस्करण में CSS का उपयोग कर सकते हैं। फिर उस अनुभाग के लिए कुछ नया HTML लिखें और इसे दें class="mobile"। फिर इसे mobile.css के अनुसार स्टाइल करें और इसे desktop.css में छिपा दें ।

— lightspeeder
स्रोत

3

मैंने एक साइट पर काम किया है जो उस पद्धति का उपयोग करती है, और मुझे मोबाइल उपकरणों पर स्क्रीन रोटेशन की समस्या थी। चूंकि जावास्क्रिप्ट केवल पृष्ठ लोड पर एक बार पता लगाएगा, अगर उपयोगकर्ता डिवाइस को घुमाता है तो यह पूरी तरह से विस्तार नहीं करेगा जिस तरह से यह मीडिया के प्रश्नों के साथ होगा। सीएसएस पर स्विच करना उस समय मेरे लिए आसान था, लेकिन शायद एक जेएस विशेषज्ञ को पता होगा कि क्या व्यूपोर्ट चौड़ाई में बदलाव का पता लगाने का कोई तरीका है। ऐसा लगता है कि AJAX के साथ एक रास्ता होना चाहिए, लेकिन मैं कुछ भी शर्त लगाने के लिए तैयार होऊंगा जो आपको मिल रहा है, जहां तक प्रदर्शन जाता है, जैसे कि मेगवेस्ट का वर्णन है।

— स्टेफ़नी
स्रोत

2

जवाबदेही और "स्मार्ट फोन पर सही ढंग से दिखाई देते हैं" पूरी तरह से अलग कार्य हैं।

संभवतः, जवाबदेही को समाप्त करने के लिए संदर्भित करता है - जहां संभव हो - सर्वर के लिए अतिरिक्त दौर यात्राएं। त्रुटि जाँच, अजाक्स अनुरोधित डेटा को पुनः प्राप्त करने के लिए, और गतिशील डोम हेरफेर ऐसे कार्य हैं जो आमतौर पर जवाबदेही में सुधार करते हैं। जावास्क्रिप्ट (या जावास्क्रिप्ट फ्रेमवर्क) का उपयोग यह करने का एक प्रभावी तरीका है। इन कार्यान्वयनों के लिए पिछले कुछ वर्षों में मैंने जावास्क्रिप्ट से jQuery के लिए स्थानांतरित किया है। कई मामलों में jQuery में अंतर्निहित ब्राउज़र संगतता है जिसमें स्पष्ट लाभ हैं। डेटकिकर, स्वतः पूर्ण और मेनू के प्लग इन विकास के घंटे बचाते हैं।

यह स्टाइल का मुख्य स्रोत नहीं होना चाहिए। कि सीएसएस का काम है। हालांकि, दोनों को एक साथ प्रभावी ढंग से इस्तेमाल किया जा सकता है। एक सरल उदाहरण में, कुछ कार्रवाई के परिणामों के आधार पर पाठ को अलग तरह से स्टाइल किया जा सकता है। CSS परिभाषित क्लास को बदलने के लिए jQuery का उपयोग किया जा सकता है।

$('#result').removeClass('red').addClass('green');

यह गतिशील रूप से स्टाइल को बदलकर मोबाइल के लिए एक मानक पृष्ठ का फिर से उपयोग करने की कोशिश करने के लिए आकर्षक है। मेरा अनुभव है कि यह एक असंतोषजनक समाधान प्रदान करता है। सीएसएस पूरी तरह से अलग है और मोबाइल सुविधाओं का लाभ उठाने के लिए अलग क्लाइंट साइड स्क्रिप्टिंग की आवश्यकता होती है। मेरी प्राथमिकता यह है कि स्टाइल या फ़ंक्शंस का उपयोग करने के लिए तर्क की आवश्यकता वाले एक पृष्ठ के बजाय अलग-अलग समर्पित HTML पृष्ठ बनाएं।

— स्टेफ़नी पेरी
स्रोत

प्रश्नकर्ता ने "उत्तरदायी वेब डिज़ाइन" ( en.wikipedia.org/wiki/Responsive_web_design ) का उल्लेख किया, जो विभिन्न स्क्रीन आकारों और क्षमताओं के लिए डिज़ाइनिंग को संदर्भित करता है। जबकि यह फोन के लिए विशिष्ट नहीं है, यह इस तकनीक को सबसे आगे लाने का एक बड़ा कारक था।

— जेकब ह्यूम

1

हमने अपनी साइटों के लिए लोकप्रिय 960.gs css फ्रेमवर्क का उपयोग किया ।

हम इसे उत्तरदायी बनाना चाहते थे।

किसी ने 960 ग्राम के लिए एक जेएस आधारित उत्तरदायी प्लगइन बनाया था, इसलिए हमने सोचा कि क्यों न इसका उपयोग किया जाए, क्योंकि हमें संरचनात्मक साइट टेम्पलेट्स में कोई बदलाव नहीं करना होगा।

यह काम किया लेकिन अच्छे सहित अधिकांश ब्राउज़रों में पिछड़ गया। आपको आमतौर पर 'अन-स्टाइल की फ्लैश' सामग्री मिलेगी जो पेज जटिलता के आधार पर बहुत भिन्न होगी।

जेएस समाधान काम करने के बावजूद वे आदर्श नहीं हैं, यदि संभव हो तो CSS 3 मीडिया क्वेरी सबसे अच्छा विकल्प है। अंत में हमने ट्विटर बूटस्ट्रैप का उपयोग करते हुए हमारी साइट को फिर से तैयार किया जो हमारी जरूरतों के लिए बहुत अच्छा था।

हालाँकि, यह कम कटौती करने के लिए उपयुक्त हो सकता है, यह अक्सर लंबे समय में अधिक समय लेने / दर्दनाक होने का काम करता है।

— megasteve4
स्रोत