البرامج التعليمية
Claude Opus 5.5: إصلاح شبكات المنتجات التي تتجاوز عرض الصفحة
اطلب من Claude Opus 5.5 تحديد مسار الشبكة أو العنصر الذي يتجاوز العرض المتاح قبل تغيير نقاط الانتقال.
نفّذ الفكرة باستخدام Panelly
حوّل الإلهام إلى إعلان لمنتجك
ابدأ بصورة منتج وفكرة. أنشئ إعلانًا بأربع لوحات أو مجموعة صور متناسقة أو فيديو باستخدام Panelly.
أنشئ باستخدام Panelly عدّل الطلب قبل بدء الإنشاء.
اطلب من Claude Opus 5.5 تحديد مسار الشبكة أو العنصر الذي يتجاوز العرض المتاح قبل تغيير نقاط الانتقال. قد يفرض رمز منتج طويل حداً أدنى تلقائياً أكبر من الشاشة حتى مع عمود 1fr. قدّم HTML الفعلي والأنماط المحسوبة وقياسات الحاوية؛ لقطة الشاشة وحدها لا تكشف ذلك الحد.
افصل مشكلات العرض الثلاث
| الملاحظة | أول ما تفحصه | إصلاح محدود |
|---|---|---|
| العمود المرن يتمدد بسبب نص متصل | الحد الأدنى للمسار والعنصر | جرّب minmax(0, 1fr) وmin-width: 0 |
| الصورة تتجاوز بطاقة سليمة العرض | العرض الأصلي للصورة وقيوده | قيّد الصورة مع حفظ نسبتها |
| عمودان لا يتسعان للمحتوى المطلوب | الشريط الجانبي والفجوة والمساحة | انتقل إلى عمود واحد وفق حاجة المحتوى |
يميّز مرجع MDN لدالة minmax بين حد أدنى تلقائي وحد صفري. تصغير المسار لا يلف محتواه أو يصغّره تلقائياً. عالج المسار والعنصر المتجاوز كلّاً على حدة، بدلاً من إخفاء كل تجاوز في الصفحة.
احسب المساحة قبل اقتراح CSS
في مثال افتراضي، عرض الشبكة الداخلي 960 px، والشريط الجانبي 240 px والفجوة 24 px؛ تبقى 696 px للمنطقة المرنة. عند عرض شاشة 390 px مع حشو 16 px لكل جانب، تتبقى 358 px. الإبقاء على الشريط والفجوة يترك 94 px للمنتجات. هنا يلزم تغيير التخطيط حتى لو استطاع المتصفح ضغط المسار.
حُسبت هذه الأرقام محلياً؛ لم نختبر إصلاحاً مولّداً بواسطة Opus أو شبكة إنتاج فعلية. قاعدة سطح مكتب مقترحة هي grid-template-columns: 240px minmax(0, 1fr) مع min-width: 0 لمنطقة المنتجات. اسمح بلف النص الطويل، وحافظ على قابلية نسخ الرموز. قد يحتاج جدول المقارنة إلى تمرير أفقي داخل حاويته بدلاً من تقسيم الكلمات. تجنّب overflow-x: hidden على الصفحة كلها؛ فقد يخفي المشكلة ويقص محتوى مفيداً.
طلب تشخيص قابل للنسخ
راجع شبكة المنتجات باستخدام HTML وCSS والأنماط المحسوبة واللقطات المرفقة. العرض الداخلي للحاسوب 960 px، والشريط الجانبي 240 px والفجوة 24 px. عرض الهاتف 390 px والحشو 16 px لكل جانب. حدّد أول عنصر يتجاوز فيه scrollWidth قيمة clientWidth، وتتبّع مسار الشبكة وقواعد الحد الأدنى لعرضه. افصل حجم المسار والنص غير القابل للكسر وحجم الصورة الأصلي. اقترح أصغر تعديل ثم نقطة انتقال مبررة إلى عمود واحد. احتفظ بترتيب المنتجات والأسماء الظاهرة ونسخ الرموز وحدود التركيز ونسب الصور. أعِد المحددات المسؤولة وحساب العرض قبل التعديل وبعده وتعديلاً صغيراً واختبارات عند 390 و1280 px. وضّح ما لا تثبته الأدلة، ولا تدّع اختبار متصفح لم تُجره.دليل Opus الرسمي هو مرجع النموذج. هذا مثال لسير عمل تحريري وليس نتيجة قياس للنموذج. يوضح سؤال مجتمعي من 2018 الالتباس القديم حول الحجم الأدنى، ولا يثبت حجم الطلب الحالي.
تحقّق من التخطيط بعد الإصلاح
اختبر رمز SKU طويلاً متصلاً واسماً مترجماً وصورة مفقودة وتركيز لوحة المفاتيح. قارن عرض تمرير المستند بعرض الشاشة، ثم افحص مناطق التمرير المحلي المقصودة منفصلة. كرر الفحص بعد تكبير النص وإزالة الشريط الجانبي. نجاح لقطة عند عرض واحد لا يثبت سلامة كامل نطاق الانتقال.
إذا كانت المشكلة اختيار ملف الصورة، راجع تدقيق الصور المتجاوبة. بعد قبول التخطيط لشكل المنتج المطلوب، أنشئ مواد الحملة في Panelly Studio. هذا لا يعني أن Panelly يضم Opus.
أسئلة قبل النشر
هل تحتاج كل شبكة إلى حد أدنى صفري؟
لا. استخدمه حين يجب أن يتقلص المسار وحدّد سلوك محتواه. لمنطقة مقارنة ثابتة العرض متطلبات مختلفة.
هل يمكن اختصار اسم المنتج؟
فقط إذا ظل الاسم الكامل متاحاً عند الحاجة. أصلح قيد العرض قبل اختيار سياسة الاختصار.
هل يجب إعادة توليد الصورة؟
غالباً لا إذا كان العيب في قياس CSS. افحص الملف المقدّم والحاوية أولاً، وغيّر الأصل فقط إذا كان تكوينه غير مناسب.
