يعرض العارض المتجاوب صفحة الويب الحالية معروضة بأحجام إطارات عرض أجهزة متعددة جنبًا إلى جنب — كل ذلك على شاشة واحدة. شاهد كيف يبدو تصميمك على هواتف آيفون، وأجهزة آيباد، وهواتف أندرويد، وأجهزة الكمبيوتر المحمولة، وأجهزة سطح المكتب في نفس الوقت. قم بالتمرير في إطار عرض واحد وسيتبعه جميع الإطارات الأخرى، مما يسهل مقارنة نفس قسم المحتوى عبر كل حجم جهاز.
اختبار التصاميم المتجاوبة يعني بشكل تقليدي تغيير حجم نافذة المتصفح أو استخدام شريط أدوات الجهاز في DevTools للتبديل بين أحجام إطار العرض واحدًا تلو الآخر. هذا يعمل، ولكن يمكنك فقط رؤية حجم واحد في كل مرة — مما يجعل من المستحيل مقارنة كيف يبدو القسم على الهاتف المحمول مقابل سطح المكتب في وقت واحد. يحل العارض المتجاوب هذا من خلال عرض الصفحة في إطارات عرض متعددة دفعة واحدة، معروضة جنباً إلى جنب على شاشتك. اختر من بين ملفات تعريف الأجهزة المعدة مسبقًا (iPhone 15 ، iPad Pro ، Pixel 8 ، MacBook ، 1440p Desktop) أو أدخل أبعادًا مخصصة. كل إطار عرض هو نسخة معروضة بالكامل من الصفحة، وليس لقطة شاشة ثابتة — قم بالتمرير في واحد وستنتقل جميع الإطارات الأخرى إلى نفس الموضع. يتيح لك هذا التمرير المتزامن مقارنة نفس منطقة المحتوى بالضبط عبر جميع أحجام الأجهزة في لمح البصر. إنها أسرع طريقة لاكتشاف المشكلات المتجاوبة: التنقل الذي يلتف بشكل غير صحيح، أو الصور التي تفيض من حاوياتها، أو النص الذي يصبح غير مقروء على الشاشات الصغيرة، أو التباعد الذي ينهار بشكل محرج.
شاهد الصفحة الحالية معروضة في نفس الوقت في أحجام إطارات عرض متعددة معروضة جنبًا إلى جنب على شاشتك. قارن تخطيطات الهاتف المحمول والأجهزة اللوحية وسطح المكتب في لمح البصر دون التبديل بين طرق العرض. كل إطار عرض هو عرض كامل الوظائف للصفحة.
اختر من مكتبة لأجهزة شائعة معدة مسبقًا: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900)، وجهاز سطح مكتب Full HD (1920×1080). يتم تحديث الإعدادات المسبقة بأبعاد الأجهزة الحالية.
أدخل أي عرض وارتفاع مخصصين لاختبار أحجام إطار عرض غير قياسية. هل تحتاج إلى التحقق من شكل الصفحة بعرض 768 بكسل بالضبط (نقطة انكسار الجهاز اللوحي الشائعة)؟ فقط اكتبها. يمكن إضافة إطارات عرض مخصصة متعددة جنباً إلى جنب مع الإعدادات المسبقة.
قم بالتمرير في إطار عرض واحد وستنتقل جميع الإطارات الأخرى إلى نفس الموضع الرأسي. يتيح لك هذا مقارنة نفس قسم المحتوى بالضبط عبر جميع أحجام الأجهزة في وقت واحد — شاهد كيف يتم عرض منطقة البطل، أو جدول الأسعار، أو التذييل عبر الهاتف المحمول، والجهاز اللوحي، وسطح المكتب.
يتم عرض كل إطار عرض داخل إطار جهاز واقعي — حواف الهاتف، وحدود الجهاز اللوحي، وكروم الكمبيوتر المحمول. يساعد السياق المرئي أصحاب المصلحة على فهم إطار العرض الذي يمثل كل جهاز أثناء المراجعات والعروض التقديمية.
قم بتبديل الأجهزة الفردية للتشغيل والإيقاف للتركيز على مقارنات أحجام معينة. هل تقارن فقط بين الجوال وسطح المكتب؟ قم بإلغاء تحديد الأجهزة اللوحية المعدة مسبقًا. هل تحتاج إلى رؤية أجهزة آيفون فقط؟ قم بإلغاء تحديد كل شيء آخر. تحكم كامل في إطارات العرض المرئية.
بعد تنفيذ تصميم متجاوب، استخدم العارض للتأكد من أن كل قسم يبدو صحيحًا عبر جميع أحجام الأجهزة المستهدفة. اكتشف تمدد النصوص، ومشاكل مقاسات الصور، وتعطل التصفح، وغياب التناسق بالمسافات — كل ذلك في عرض واحد.
أظهر للعملاء كيف يبدو موقعهم عبر الأجهزة المنوعة خلال الاجتماع. العرض المتجاور تفصيل مباشر — فلا داعي لشرح مصطلحات متخصصة للعملاء الذين سيرون تصاميم الجوال واللوحي والمكتبي في ذات الوقت.
هل ترى أن التصميم يتشوه عند عرض محدد؟ اضف إطار عرض مخصص عند عرض البكسل المحدد حيث تنشأ المشكلة؛ لتتمكن من مقارنته مع إطارات أعرض وأضيق، وتحدد أي نقطة انكسار في CSS هي المسببة للمشكلة.
تأكد إذا كانت العناوين الطويلة تلتف بشكل مناسب على الجوال، وما إذا كانت الجداول قابلة للتمرير على الشاشات الصغيرة، وإن كانت مساحات الإدخال كافية للمس، وكون أزرار الإجراءات (CTAs) مرئية ومتاحة لكافة المقاسات.
استخدم عرض الأجهزة المتعددة لإنتاج صور جذابة لتصميمك المتجاوب لتعرضها في حقيبة أعمالك. التقط صورة للشاشة من العارض المتجاوب لتوضيح تصميمك عبر 3-4 مقاسات مختلفة كعرض تقديمي محترف.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق أيقونة العارض المتجاوب. تنتقل الصفحة إلى وضع الإطارات المتعددة مع عرض إطارات الأجهزة جنبًا إلى جنب.
يعرض شريط الأجهزة في الأعلى الإعدادات المسبقة المتاحة (آيفون، آيباد، بيكسل، ماك بوك، سطح المكتب). انقر فوق الأجهزة لتبديل تشغيلها / إيقاف تشغيلها. تظهر الأجهزة المحددة كإطارات عرض في الأسفل.
انقر فوق زر "مخصص" (Custom) وأدخل أبعادًا معينة للعرض × الارتفاع لإضافة إطار عرض مخصص. مفيد لاختبار قيم نقاط الانكسار (breakpoints) الدقيقة مثل 768 بكسل أو 1024 بكسل أو 1280 بكسل.
قم بالتمرير في أي إطار عرض — وستتبع البقية بتبني نفس الموضع. قارن كيف يظهر القسم عينه في كل عرض من الأحجام المحددة بوقت واحد.
انقر فوق أيقونة العارض المتجاوب مرة أخرى أو زر الإغلاق للخروج من وضع الإطارات المتعددة والعودة إلى عرض الصفحة الفردية العادي.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
