إصلاح · الصفحات والهاتف والعربية

تبدو الصفحة مكسورة على الهاتف

تعطّل عملك

ما قد تراه

النص صغير جداً أو العناصر تتداخل أو الصفحة مقطوعة
تبدو سليمة على حاسوبي

السبب الأرجح

للصفحة عروض ثابتة أو يغيب إعداد viewport، فتعرض الهواتف صفحة حاسوب مصغرة أو تفيض.

افحص أولاً (نحو دقيقتين)

افتح الصفحة بعرض 390 بكسل (وضع الجهاز في المتصفح) وابحث عمّا يفيض.
تحقق أن head فيه وسم viewport.

أمر الإصلاح

ما تكتبه هنا لا يغادر متصفحك. البحث يعمل داخل هذه الصفحة ولا يُرسل شيء إلى خادم ولا إلى ذكاء اصطناعي.

نص الخطأ بالضبط أو ما تراه

ما فعلته قبل أن يحدث

يبقى في هذا المتصفح وعلى هذا الجهاز فقط. تُحذف المفاتيح وكلمات المرور قبل أي حفظ.

لغة الأمر

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

المشكلة
تبدو الصفحة مكسورة على الهاتف

نص الخطأ كما ظهر لي، أو ما أراه
[الصق هنا نص الخطأ كما ظهر لك]

ما فعلته قبل أن تحدث المشكلة
[اكتب بإيجاز ما فعلته قبل ظهور المشكلة]

السبب الأرجح
للصفحة عروض ثابتة أو يغيب إعداد viewport، فتعرض الهواتف صفحة حاسوب مصغرة أو تفيض.

نفّذ هذه الخطوات بهذا الترتيب
1. تحقق أن head الصفحة فيه وسم viewport بـ width=device-width وinitial-scale=1.
2. اعثر على العروض الثابتة (width وmin-width بالبكسل) واستبدلها بمرنة (max-width ونسب minmax).
3. اجعل الأعمدة تتراص على الهواتف والصور تتسع (max-width: 100%) والأزرار بارتفاع 44 بكسل على الأقل.
4. اختبر عند 390 و768 و1280 بكسل بالإنجليزية والعربية.
توقف وأخبرني إذا كان ما تراه لا يطابق إحدى الخطوات. لا تتجاوز أي خطوة.

تأكد أن الحل نجح
- عند 390 بكسل لا يتداخل شيء ولا يوجد تمرير جانبي ويُقرأ النص دون تكبير.
أخبرني بالضبط ماذا يجب أن أرى على الشاشة عندما ينجح.

لا تغيّر
- لا تعِد تصميم نسخة الحاسوب.
- أي شيء لم أطلبه: التصميم أو النصوص أو الصفحات الأخرى أو الإعدادات الأخرى أو البيانات.
- لا تحذف ملفات أو بيانات أو فروعاً، ولا تعِد الضبط ولا تدفع بالقوة (force push)، ولا تعيد كتابة السجل، إلا بعد أن تعرض عليّ بالضبط ما الذي سيضيع وأوافق.
- لا تلصق ولا تطبع ولا تطلب مني لصق كلمة مرور أو مفتاح سري في هذه المحادثة. وإذا لزم أحدها فأخبرني في أي صفحة إعدادات من الخدمة الصحيحة أحفظه.

عند الانتهاء
اشرح بكلمات بسيطة ما الذي غيّرته (ملفاً ملفاً أو إعداداً إعداداً) ولماذا غيّرته وكيف أتراجع عنه.

الصقه في Claude أو ChatGPT أو Gemini أو Cursor ثم اتبع ما يقوله.

بعد أن جرّبته، هل نجح؟

الخطوات

تحقق أن head الصفحة فيه وسم viewport بـ width=device-width وinitial-scale=1.
اعثر على العروض الثابتة (width وmin-width بالبكسل) واستبدلها بمرنة (max-width ونسب minmax).
اجعل الأعمدة تتراص على الهواتف والصور تتسع (max-width: 100%) والأزرار بارتفاع 44 بكسل على الأقل.
اختبر عند 390 و768 و1280 بكسل بالإنجليزية والعربية.

لا تفعل هذا

لا تخفِ المحتوى على الهواتف لمجرد أن يتسع.
لا تعِد تصميم نسخة الحاسوب.