2013-05-23 6 views
15

में मोबाइल-प्रथम का उपयोग कैसे करते हैं, यह देखते हुए कि सिंगुल्युलरजीएस डिफ़ॉल्ट रूप से, मोबाइल-पहला दृष्टिकोण है, आप लोग IE8 में समस्या का समाधान कैसे करते हैं, जो मीडिया-प्रश्नों पर निर्भर करता है जो सब कुछ का मोबाइल संस्करण दिखाता है?आप IE8

क्या आपको इसके लिए कोई समाधान मिला है या क्या मुझे डेस्कटॉप पर पहले स्विच करना है?

धन्यवाद।

उत्तर

36

इसके बजाय, आप कर सकते हैं आईई 7-8 वास्तव में मीडिया प्रश्नों का समर्थन!

आईई 7 और 8 में मीडिया प्रश्नों को सक्षम करने के लिए मैं भयानक Respond.js पॉलीफिल का उपयोग करता हूं। बस इस कोड को अपने HTML <head> पर जोड़ें और आप जाने के लिए अच्छे हैं!

<!--[if lt IE 9]> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

तुम भी तो .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } की तरह है कि सामान काम करेगा आईई 7 और 8 में CSS3 के चयनकर्ताओं सक्षम करने के लिए चाहते हो सकता है।

आपको Selectivizr पॉलीफिल की आवश्यकता होगी। Selectivizr के साथ मिलकर काम करने के लिए प्रतिक्रिया के लिए, Selectivizr संस्करण 1.0.3b या बाद में होना चाहिए (जिसे अभी तक किसी कारण से स्थिर for two years के रूप में रिलीज़ नहीं किया गया है) और से पहले लोड किया जाना चाहिए। Selectivizr को NWMatcher या इसके पहले लोड होने के विकल्प की भी आवश्यकता है। तो सही क्रम इस प्रकार है:

<!--[if lt IE 9]> 
    <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script> 
    <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

और आप पूरी तरह से भी html5shiv polyfill (उर्फ html5shim) आईई 7-8 का समर्थन सबसे बुनियादी CSS3 के सामान बनाने के लिए होना चाहिए।

तो आईई 7-8 polyfills की मेरी अंतिम सेट इस तरह दिखता है:

<!--[if lt IE 9]> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> 
    <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script> 
    <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

नोट: यह के रूप में उन के साथ संयोजन में IE9.js का उपयोग नहीं करते आईई 8 फ्रीज कर देगा।

+0

क्या आप स्थानीय रूप से इन .js फ़ाइलों को होस्ट कर रहे हैं? क्या आप उन्हें सीडीएन के माध्यम से लिंक कर सकते हैं? धन्यवाद, –

+0

आप स्क्रिप्ट टैग से बता सकते हैं कि उन्हें सीडीएन पर होस्ट किया गया है। आप एचटीएमएल कोड की प्रतिलिपि बना सकते हैं और इसे बिना किसी संशोधन के अपने प्रोजेक्ट में इस्तेमाल कर सकते हैं। –

+1

कृपया Respond.js या Selectivizr का उपयोग न करें। Respond.js और Selectivizr दोनों प्रत्येक आइटम के लिए अतिरिक्त HTTP अनुरोध उत्पन्न करते हैं जिनके साथ उन्हें काम करने की आवश्यकता होती है और आपके महत्वपूर्ण पथ में ब्लोट जोड़ती है। प्रतिक्रिया केवल पीएक्स आधारित न्यूनतम/अधिकतम चौड़ाई एमक्यू के साथ काम करता है और सिलेक्टिवइज़र इतनी धीमी है कि मैंने इसे आईई 8 को क्रैश किया है, जिसके साथ काम करने की कोई अनुचित संख्या नहीं है। इसके बजाय, उन ब्राउज़रों की सीमाओं के साथ काम करें जिन्हें आप समर्थन दे रहे हैं और फॉलबैक समर्थन के लिए फीचर डिटेक्शन और क्लासेस का उपयोग करें। – Snugug

7

मैं अपने क्वेरी टैग या मीडिया क्वेरी समर्थन के लिए मॉडर्नइज़र परीक्षणों पर या तो आईई कक्षाओं के साथ संयोजन में ब्रेकपॉइंट के निर्माण में नो क्वेरी फ़ॉलबैक समर्थन का उपयोग करता हूं। आईई 7 और 8 कमियों के आसपास काम करने का

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

+0

धन्यवाद। मैंने अभी तक सास या मॉडर्निजर का उपयोग नहीं किया है, इसलिए मुझे यकीन नहीं है कि मैं इसे कार्यान्वित कर सकता हूं। यदि आप इसका उपयोग करने के तरीके पर किसी भी अच्छे ट्यूटोरियल या स्पष्टीकरण के बारे में जानते हैं तो कृपया यहां पोस्ट करें। मैं इस बारे में पढ़ता रहता हूं कि यह कितना महान है और समय बचाता है लेकिन इस बात का संकेत नहीं है कि इसका उपयोग कैसे करें या इसे कैसे सेट करें। –