आधुनिकizr 2.5.3 आईई और ओपेरा में मीडिया क्वेरी परीक्षण ब्रेक पेज

Question

मेरे पास एक HTML5 दस्तावेज़ है जो मीडिया प्रश्नों का उपयोग करता है। पुराने ब्राउजर के उपयोगकर्ताओं को पूरा करने के लिए मैं सिर्फ जेएस में व्यवहार का अनुकरण करने की कोशिश कर रहा था और mq-testing करने के लिए जेएस में व्यवहार का अनुकरण करने और आधुनिकता 2.5.3 (फ़ाइल को एचटीएमएल 5 बॉयलरप्लेट डाउनलोड से मिला) का उपयोग करने की कोशिश कर रहा था।

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

मैं इस निम्नलिखित तरीके से करना:

//$window is $(window) 
if ($window.width() < 575 || Modernizr.touch){ 
    //change UI layout a little 
} 

if (Modernizr.touch){ 
    //enable tap-navigation for touch devices 
} 

if (!Modernizr.mq('only all and (min-width: 575px)')){ //fix non-media query browsers 

    $window.resize(function(){ 

    if ($window.width() < 575){ 
     //add CSS 
    } else { 
     //remove CSS 
    }).trigger('resize'); 

} 

यह (और मोबाइल डेस्कटॉप) वेबकिट में ठीक काम करता है और फ़ायरफ़ॉक्स, अभी तक जब मैं ओपेरा में पेज (11.6) या Internet Explorer को खोलने का प्रयास (7 9 तक) नरक टूट जाता है। घटनाक्रम एक यादृच्छिक संख्या को आग लगेंगे, jQuery एनीमेशन ईमानदार होने के लिए आधे रास्ते से रुक जाएगा, मुझे कोई संकेत नहीं है कि क्या हो सकता है (हालांकि कोई कंसोल त्रुटियां नहीं)। जब मैं अपने पृष्ठ के सिर में आधुनिकता स्क्रिप्ट को हटा देता हूं, तो यह ठीक काम कर रहा है (पाठ्यक्रम की विशेषता का पता लगाने के अलावा ...)।

की तरह क्या मैं भी कर रहा हूँ html5shiv उपयोग कर रहा है (मैं लोड हो रहा है कर रहा हूँ इस के बाद modernizr, फिर भी अभी भी सिर में):

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

मैं इस पर शक था में दोषी मामला आईई तोड़ता है, लेकिन चूंकि इसे ओपेरा के व्यवहार पर कोई प्रभाव नहीं लेना चाहिए, इसलिए मैं थोड़ा उलझन में हूं।

क्या मैं कुछ गलत कर रहा हूं या यह किसी प्रकार की बग है और मुझे अपनी सुविधा का पता लगाने के लिए एक और तरीका देखना चाहिए?

संपादित:

जब मैं पता लगाने के लिए कि मैं क्या निम्नलिखित में पता चला हो रहा है कोशिश कर रहा हूँ: Modernizr.mq('only all and (min-width: 575px)'): क्या सभी बुराई की जड़ हो रहा है सिर्फ मीडिया क्वेरी परीक्षण है। जैसे ही इसे चीजें कहा जाता है पागल हो जाते हैं। मैं इसे कंसोल में जोड़ सकता हूं और सही परिणाम प्राप्त करूंगा, फिर भी ऐसा लगता है कि कुछ अजीब तरीके से कुछ तोड़ना है। साथ ही, मैं कंसोल से इसे कॉल करके एक चल रहे पृष्ठ को तोड़ सकता हूं (जिसने इसे पहले नहीं कहा है)।

संपादित नंबर 2:

जबकि एक वैकल्पिक तरीका सुविधा परीक्षण मैं this library पाया Dev.Opera में अधिक है कि (वाह!) ओपेरा में ठीक से काम करने लगता है संभाल करने के लिए खोज। अभी तक यह आईई (वेबकिट और Firefox ठीक हैं) में काम नहीं करता है के रूप में इसके बारे में शिकायत:

style.innerText = '@media ' + str + ' { #'+id+' { display:none !important; } }'; 

भावहीन।

संपादित नंबर 3:

तो मैं सिर्फ 2.0.6 Modernizr के लिए डाउनग्रेड और चीजों को अब सभी ब्राउज़रों में ठीक काम कर रहे हैं। हालांकि मुझे अभी भी यकीन नहीं है कि यह एक बग है या मैं कुछ गलत कर रहा हूं, इसलिए मैं इसे जवाब देने से पहले कुछ समय इंतजार करूंगा।

Answer 1

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

अंतिम उपाय के रूप में मैंने आधुनिकता के स्रोत कोड को देखा। एमक्यू विधि में, एक अन्य प्रोजेक्ट को मिलान मीडिया कहा जाता है। MatchMediaproject आधुनिक आयरिश योगदानकर्ता पॉल पॉल आयरिश में से एक है। वास्तव में, Modernizr MediaMatch को कॉल करेगा यदि यह पहले से ही अपने मीडिया क्वेरी टेस्ट के स्थान पर पृष्ठ पर मौजूद है। इसलिए मैंने matchMedia.js डाउनलोड किया और इसे मेरे प्रोजेक्ट में जोड़ा और यह मेरी समस्या को ठीक कर दिया।

//From moderizr source, remarks are my notes. 
    testMediaQuery = function(mq) { 

    //if matchMedia or msMatchMedia return the matchMedia result, else execute modernizr code 
      var matchMedia = window.matchMedia || window.msMatchMedia; 
      if (matchMedia) { 
      return matchMedia(mq).matches; 
      } 
    //if mediaMatch is not found the moderizr version of this method executes... 

आप यहाँ matchMedia.js प्राप्त कर सकते हैं, https://github.com/paulirish/matchMedia.js

अद्यतन: मैं 2.5.3 के एक कस्टम निर्माण पुनर्जीवित और इसे बाहर matchMedia.js साथ काम करता है।

Answer 2

ओपेरा मोबाइल 9.5 के साथ आज भी मुझे एक ही समस्या थी। शायद यह एकाधिक मीडिया क्वेरी परीक्षणों के लिए एक ही div का उपयोग करके होता है।ओपेरा डेवलपर के कोड यादृच्छिक आईडी का उपयोग करता है मीडिया के प्रश्नों का परीक्षण करने के:

id = ('x'+Math.random()).replace(/\./,'');

लेकिन modernizr दिनचर्या matchMedia polyfill ही उपयोग करता है। शायद यह उन ब्राउज़रों के भीतर नहीं हटाया गया है? मैं कुछ इस तरह की कोशिश की है:

min200 = ((Modernizr.mq('all and (min-device-width: 200px)')) ? "yes" : "no"); min400 = ((Modernizr.mq('all and (min-device-width: 400px)')) ? "yes" : "no"); ... min600 = ((Modernizr.mq('handheld')) ? "yes" : "no");

MQ() सच हो जाता है, बाकी सच भी हो जाएगा। फिर भी यह गलत हो सकता है ...

ओपेरा के लिंक के लिए धन्यवाद!

Answer 3

मुझे आईई 7 और 8 में एक ही समस्या हो रही थी। इसलिए मैं जिथूब पेज से लाइब्रेरी चला गया और फिर से डाउनलोड किया और समस्या ठीक हो रही है। मुझे आशा है कि modernizr.com को जल्द ही नए कोड के साथ अपडेट किया जाएगा ताकि मैं एक कस्टम बिल्ड डाउनलोड कर सकूं।