المعاينة الحية واختبار الاستجابة

أوضاع العرض الثلاثة

أزرار التبديل أعلى المعاينة تغيّر عرض الإطار فوراً بدون إعادة بناء المشروع:

مختبر الاستجابة

لاختبار أدق، يعرض مختبر الاستجابة المشروع بمقاسات أجهزة حقيقية بأبعادها الفعلية:

إضافة إلى مقاس مخصص تكتب فيه العرض والارتفاع بنفسك عندما تستهدف جهازاً خارج القائمة.

نقاط توقف Tailwind

الانتقال السريع إلى نقاط توقف Tailwind يفيد عند تصحيح صف يتغيّر عند حد معيّن — تقفز إلى الحد نفسه بدل تخمينه بالسحب:

سير عمل مقترح

1. ابنِ الصفحة وراجعها على Desktop أولاً — البنية العامة والتسلسل البصري.
2. انتقل إلى Mobile بعرض 375 بكسل: هنا تظهر معظم مشاكل التخطيط.
3. افحص نقطة التوقف md عند 768 بكسل — الانتقال بين عمود وعمودين أكثر موضع ينكسر.
4. شغّل فاحص الأداء قبل النشر للتأكد من أن الصور والأحجام لم تكبر أثناء التعديلات.

أسئلة شائعة

هل المعاينة تعكس الموقع المنشور بدقة؟

نعم، المعاينة تعرض ملفات المشروع نفسها التي ستُنشر. الفرق الوحيد أنها تعمل داخل إطار بعرض محدود، فبعض التأثيرات المرتبطة بارتفاع نافذة المتصفح قد تبدو مختلفة قليلاً.

لماذا يبدو التصميم مكسوراً على عرض 375 بكسل؟

غالباً بسبب عنصر بعرض ثابت أكبر من الشاشة أو جدول بلا حاوية تمرير. اطلب من الشات جعل العنصر متجاوباً، أو راجع فاحص الأداء الذي يرصد الأنماط المضمّنة التي تسبب هذا عادة.

هل يمكنني تجربة مقاس غير موجود في القائمة؟

نعم، يقبل مختبر الاستجابة عرضاً وارتفاعاً مخصصين بالبكسل إلى جانب الأجهزة التسعة الجاهزة.

كيف أختبر اتجاه RTL؟

المعاينة ترث اتجاه المحتوى نفسه، فالموقع العربي يظهر باتجاه RTL تلقائياً. جرّب المقاسات الضيقة تحديداً — أكثر أخطاء RTL شيوعاً هي تجاوز أفقي لا يظهر إلا تحت 400 بكسل.