اتصل بي صديق لي مؤخرًا لطلب المساعدة بشأن موقع WordPress الذي أنشأه باستخدام سمة X. اتصل به موكله في ذلك الصباح بعد أن لاحظ أن موقعه على الويب لا يُعرض بشكل صحيح على جهاز iPhone الخاص به. قام نيك بفحصها بنفسه ، ومن المؤكد أن التصميم الجميل المتجاوب الذي صممه لم يعد يعمل.
لقد شعرت بالحيرة أكثر من حقيقة أنه عندما قام بتغيير حجم نافذة متصفحه على سطح مكتبه ، كان الموقع متجاوبًا ، ولكن على جهاز iPhone الخاص به ، تم عرض إصدار سطح المكتب فقط. لماذا يكون الموقع مستجيبًا على كمبيوتر سطح المكتب وغير مستجيب على جهاز محمول؟
لماذا لا يعمل التصميم المستجيب
التصميم سريع الاستجابة يتوقف عن العمل عندما يكون سطر واحد من التعليمات البرمجية مفقودًا من رأس ملف HTML. إذا كان هذا السطر الفردي من الكود مفقودًا ، فسيفترض جهاز iPhone و Android والأجهزة المحمولة الأخرى أن موقع الويب الذي تعرضه هو موقع سطح مكتب بالحجم الكامل وسيضبط حجمviewportلإحاطة الشاشة بالكامل.
ماذا تقصد بإطار العرض وحجم منفذ العرض؟
على جميع الأجهزة ، يشير حجم منفذ العرض إلى حجم منطقة صفحة الويب المرئية للمستخدم حاليًا. تخيل أنك تحمل iPhone 5 بعرض 320 بكسل. ما لم يُذكر خلاف ذلك صراحةً ، تفترض أجهزة iPhone أن كل موقع ويب تزوره هو موقع سطح مكتب بعرض 980 بكسل.
الآن ، باستخدام جهاز iPhone 5 الخيالي ، تزور موقعًا إلكترونيًا مصممًا لسطح المكتب بعرض 800 بكسل. لا يحتوي على تنسيق سريع الاستجابة ، لذلك يعرض iPhone إصدار سطح المكتب بعرض كامل.
لا ليس كذلك. مع حجم منفذ العرض ، يمكن أن يكون التحجيم متضمنًا. يجب أن يقوم جهاز iPhone بالتصغير لرؤية النسخة كاملة العرض لصفحة الويب. تذكر أن منفذ العرض يشير إلى منطقة الصفحة المرئية للمستخدم حاليًا. هل يرى مستخدم iPhone حاليًا 320 بكسل فقط من الصفحة ، أم أنه يشاهد النسخة كاملة العرض؟
هذا صحيح: إنهم يشاهدون صفحة الويب كاملة العرض على الشاشة لأن iPhone افترض أن هذا السلوك الافتراضي: يتم تصغيرها حتى يتمكن المستخدم من عرض صفحة ويب بعرض يصل إلى 980 بكسل. لذلك ، يبلغ حجم منفذ عرض iPhone 980 بكسل.
أثناء التكبير أو التصغير ، يتغير حجم منفذ العرض. قلنا من قبل أن عرض موقع الويب التخيلي الخاص بنا يبلغ 800 بكسل ، لذلك إذا كنت تريد تكبير جهاز iPhone الخاص بك بحيث تلامس حواف موقع الويب حواف شاشة iPhone ، فسيكون منفذ العرض 800 بكسل. يمكن أن يكون لجهاز iPhone إطار عرض 320 بكسل على موقع سطح المكتب ، ولكن إذا حدث ذلك ، فستشاهد فقط جزءًا صغيرًا منه.
موقع الويب المستجيب الخاص بي مكسور. كيف أصلحه؟
الإجابة عبارة عن سطر واحد من HTML والذي عند إدراجه في رأس صفحة ويب يخبر الجهاز بضبط منفذ العرض على عرضه الخاص (320 بكسل في حالة iPhone 5) وليس القياس (أو تكبير) الصفحة.
لمزيد من المناقشة الفنية لجميع الخيارات المتعلقة بهذه العلامة الوصفية ، راجع هذه المقالة على tutsplus.com.
كيفية إصلاح سمة WordPress X عندما لا تستجيب
العودة إلى صديقي من قبل: اختفى هذا السطر الأول من التعليمات البرمجية عندما قام بتحديث سمة X. عند إصلاح السمة الخاصة بك ، ضع في اعتبارك أن سمة X لا تستخدم ملف رأس واحد فقط - فهي تستخدم ملفات رأس مختلفة لكل حزمة ، لذلك سيتعين عليك تحرير ملفك.
نظرًا لأن Nick يستخدم حزمة Ethos الخاصة بسمة X ، كان عليه إضافة سطر من الكود الذي ذكرته من قبل إلى ملف الرأس الموجود في x / framework / views / ethos / wp-header.بي أتش بي . إذا كنت تستخدم مكدسًا مختلفًا ، فاستبدل اسم المكدس الخاص بك (Integrity ، Renew ، إلخ) بـ "ethos" للعثور على ملف الرأس الصحيح. أدخل هذا السطر ، وفويلا! أنت على ما يرام.
لذا فإن هذا يعمل على إصلاح استفسارات وسائط CSS الخاصة بي ، أيضًا؟
عند إدخال هذا السطر في رأس ملف HTML الخاص بك ، ستبدأ استفساراتmedia المستجيبة في العمل مرة أخرى وستعود نسخة الهاتف المحمول من موقع الويب الخاص بك إلى الحياة. شكرا على القراءة وآمل أن تساعد!
تذكر أن تدفع إلى الأمام ، ديفيد ب.
