أداء Polyfill لاستعلام الوسائط - IE

Question

أنا في المرحلة الأولى من بناء الموقع.إنني أبحث في بعض عناصر التصميم التي من شأنها الاستفادة من استعلامات الوسائط للعمل بشكل صحيح مع أحجام الشاشات الأصغر.

ليس لدي أي مشكلة مع هذا إلا أن هذا سيكون موقع صغير وبالتالي فإن جافا سكريبت الوحيد الذي يعمل عليه سيكون إلى حد كبير عبارة عن Polyfill لاستعلامات الوسائط الخاصة بـ IE والمتصفحات الأخرى.

ما مدى تأثير ذلك على الأداء؟هل هناك أي اختبارات مناسبة تم إجراؤها؟

أنا أسأل لأنني في المرحلة الآن أنه إذا كانت الحشوة المتعددة تؤثر على الأداء بدرجة كافية، فيمكنني تعديل التصميم حتى لا أضطر إلى استخدامها، وأيضًا كفكرة للمشاريع المستقبلية.

السؤال مكافأة:
إذا كنت لا أستخدم الهاتف المحمول أولاً ولكن استخدم الهاتف المحمول أخيرًا، فافعل max-width الاستعلامات بدلا من min, ، هل سأحتاج حتى إلى polyfill.إذا لم يتغير شيء في الصفحة حتى أصبح عرضها أقل من 500 بكسل، فهل أحتاج حقًا إلى القلق بشأن عدم عرض IE لها؟أم أنني أفتقد بعض حالات الحافة؟

Answer 1

لنبدأ بسؤال المكافأة الخاص بك.

إذا اقتربت مع max-width استعلامات الوسائط، لا أعتقد أنك تحتاج بالفعل إلى حل JS لـ IE8 وما دونه.ومع ذلك، يعتمد الأمر حقًا على موقعك الإلكتروني "نقطة الانهيار".

من المحتمل أن المستخدم الذي لا يزال لديه IE7 قيد التشغيل لن يكون لديه شاشة عالية الدقة بدقة 1920 × 1200.لذا ضع في اعتبارك أن كل شيء يعمل حسنًا للشاشات مقاس 800 × 600 دون الحاجة إلى استعلامات الوسائط.

أنا شخصياً أفضّل أ min-width النهج، حتى أستطيع تعزيز تدريجيا مميزات موقعي .لكن ذلك يعتمد حقًا على نوع مشروعك/جمهورك.

---

وفق احصائيات StatCounter العالمية, ، في سبتمبر 2012، لا يزال 14% من المستخدمين يستخدمون IE8، وأقل من 2% IE7.

إذا كنت ترغب في تقديم أفضل تجربة مستخدم لهذه الـ 15% (حوالي 6 من كل 100)، فربما تحتاج إلى Response.js.

لقد استخدمته واختبرته على IE7 وIE8.لم ألاحظ اختلافًا في الأداء، لكن لم أتمكن من العثور على أي اختبار مرجعي عبر الإنترنت.

يوصى به من موديرنيزر وأدرجت في html5boilerplate بناء سريع الاستجابة، لذلك أنا متأكد من أنه يمكنك...الوثوق به؛-)