موقع الويب المتجاوب الخاص بي لا يعمل. الإصلاح: منفذ العرض.

اتصل بي صديق لي مؤخرًا لطلب المساعدة بشأن موقع WordPress الذي أنشأه باستخدام سمة X. اتصل به موكله في ذلك الصباح بعد أن لاحظ أن موقعه على الويب لا يُعرض بشكل صحيح على جهاز iPhone الخاص به. قام نيك بفحصها بنفسه ، ومن المؤكد أن التصميم الجميل المتجاوب الذي صممه لم يعد يعمل.

لقد شعر بالحيرة أكثر من حقيقة أنه عندما قام بتغيير حجم نافذة المتصفح على سطح المكتب الخاص به ، الموقع كنت متجاوب ، ولكن على جهاز iPhone الخاص به ، تم عرض إصدار سطح المكتب فقط. لماذا يكون الموقع تستجيب على جهاز كمبيوتر سطح المكتب و غير مستجيب على جهاز محمول؟

لماذا لا يعمل التصميم المستجيب

يتوقف التصميم سريع الاستجابة عن العمل عندما يكون سطر واحد من التعليمات البرمجية مفقودًا من رأس ملف HTML. إذا كان هذا السطر الفردي من الشفرة مفقودًا ، فسيفترض جهاز iPhone و Android وأجهزة الجوال الأخرى أن موقع الويب الذي تعرضه هو موقع سطح مكتب بالحجم الكامل وسيضبط حجم منفذ العرض لتشمل الشاشة بأكملها.

ماذا تقصد بإطار العرض وحجم منفذ العرض؟

على جميع الأجهزة ، يشير حجم منفذ العرض إلى حجم منطقة صفحة الويب التي تكون مرئية للمستخدم حاليًا. تخيل أنك تحمل iPhone 5 بعرض 320 بكسل. ما لم يُذكر خلاف ذلك صراحةً ، تفترض أجهزة iPhone أن كل موقع ويب تزوره هو موقع سطح مكتب بعرض 980 بكسل.

الآن ، باستخدام جهاز iPhone 5 التخيلي الخاص بك ،تقوم بزيارة موقع ويب مصمم لسطح المكتب بعرض 800 بكسل. لا يحتوي على تنسيق سريع الاستجابة ، لذلك يعرض iPhone إصدار سطح المكتب الكامل العرض.

اي فون عالق في دائرة الغزل

لكن iPhone 5 يبلغ عرضه 320 بكسل فقط. أليس هذا دائمًا هو حجم إطار العرض؟

لا ليس كذلك. مع حجم منفذ العرض ، التحجيم يمكن أن تشارك . يجب أن يقوم جهاز iPhone بالتصغير لرؤية النسخة كاملة العرض لصفحة الويب. تذكر أن منفذ العرض يشير إلى منطقة الصفحة المرئية للمستخدم حاليًا. هل يرى مستخدم iPhone حاليًا 320 بكسل فقط من الصفحة ، أم أنهم يشاهدون النسخة كاملة العرض؟

هذا صحيح: إنهم يرون صفحة ويب كاملة العرض على شاشة العرض لأن iPhone افترض أن هذا السلوك الافتراضي: لقد تم تصغيرها حتى يتمكن المستخدم من عرض صفحة ويب بعرض يصل إلى 980 بكسل. لذلك ، يبلغ حجم منفذ عرض iPhone 980 بكسل.

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

لقد فقدت ملاحظاتي على جهاز iphone الخاص بي

موقع الويب المستجيب الخاص بي معطل. كيف أصلحه؟

الإجابة عبارة عن سطر واحد من HTML والذي عند إدراجه في رأس صفحة الويب يخبر الجهاز أن يضبط إطار العرض على عرضه الخاص (320 بكسل في حالة iPhone 5) وليس لتغيير حجم الصفحة (أو تكبيرها).

لمزيد من المناقشة الفنية لجميع الخيارات المتعلقة بهذه العلامة الوصفية ، تحقق من هذه المقالة على tutsplus.com .

كيفية إصلاح سمة WordPress X عندما لا تكون مستجيبة

العودة إلى صديقي من قبل: اختفى هذا السطر من التعليمات البرمجية عندما قام بتحديث سمة X. عند إصلاح السمة الخاصة بك ، ضع في اعتبارك أن السمة X لا تستخدم ملف رأس واحد فقط - فهي تستخدم ملفات رأس مختلفة لكل حزمة ، لذلك سيتعين عليك تعديل نسختك.

ملاحظات متزامنة من ماك إلى آيفون

نظرًا لأن Nick يستخدم مجموعة Ethos الخاصة بسمة X ، فقد اضطر إلى إضافة سطر من الكود الذي ذكرته من قبل إلى ملف الرأس الموجود في x /frameworks/views/ethos/wp-header.php . إذا كنت تستخدم مكدسًا مختلفًا ، فاستبدل اسم المكدس الخاص بك (Integrity ، Renew ، إلخ) بـ 'ethos' للعثور على ملف الرأس الصحيح. أدخل هذا السطر ، وفويلا! أنت على ما يرام.

إذاً هذا يعمل على إصلاح استعلامات وسائط CSS الخاصة بي ، أيضًا؟

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

تذكر أن Payette Forward ،
ديفيد ب.