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

ارتفاع 100vh أطول من اللازم على الهواتف (المحتوى مخفي تحت شريط المتصفح)

ما قد تراه

أسفل القسم بملء الشاشة مقطوع على الآيفون
يظهر شريط تمرير بلا سبب

السبب الأرجح

على الهواتف تظهر أشرطة المتصفح وتختفي، ويحسب 100vh الارتفاع الأكبر فيقع المحتوى تحتها.

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

ابحث عن كل height: 100vh في CSS.

أمر الإصلاح

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

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

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

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

لغة الأمر

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

المشكلة
ارتفاع 100vh أطول من اللازم على الهواتف (المحتوى مخفي تحت شريط المتصفح)

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

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

السبب الأرجح
على الهواتف تظهر أشرطة المتصفح وتختفي، ويحسب 100vh الارتفاع الأكبر فيقع المحتوى تحتها.

نفّذ هذه الخطوات بهذا الترتيب
1. استبدل 100vh بـ min-height: 100svh (أو 100dvh) مع إبقاء 100vh كسطر بديل قبله.
2. استخدم min-height بدل height ليتسع المحتوى الطويل.
3. اختبر على آيفون حقيقي أو WebKit عند 390 في 844.
توقف وأخبرني إذا كان ما تراه لا يطابق إحدى الخطوات. لا تتجاوز أي خطوة.

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

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

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

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

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

الخطوات

استبدل 100vh بـ min-height: 100svh (أو 100dvh) مع إبقاء 100vh كسطر بديل قبله.
استخدم min-height بدل height ليتسع المحتوى الطويل.
اختبر على آيفون حقيقي أو WebKit عند 390 في 844.

لا تفعل هذا

لا تجعل الواجهة الرئيسية بارتفاع بكسل ثابت.
لا تستخدم جافاسكربت لضبط الارتفاعات إن كان CSS يكفي.