أداة قياس منفذ العرض ونقاط التوقف الاستجابية

نافذة العرض هي المنطقة التي يجب على صفحة الويب الرسم فيها — نافذة المتصفح بدون علامات التبويب، شريط العنوان، وأشرطة التمرير. لهذا السبب تكون تقريبا دائما أصغر من دقة الشاشة: الشاشة هي اللوحة بأكملها، بينما نافذة العرض هي فقط الشريحة التي يمكن للصفحة استخدامها. تُقاس بوحدات بكسل CSS، وهي وحدات تخطيط لا نقاط فيزيائية — حيث تحتوي شاشات 'Retina' عالية الكثافة على بكسلين أو ثلاثة فعليين في كل بكسل CSS ليبدو النص أكثر وضوحا، ويُبلغ window.devicePixelRatio عن هذا المضاعف.

تقرأ هذه الأداة window.innerWidth و window.innerHeight عند كل تغيير في الحجم والاتجاه، إلى جانب نافذة العرض للتخطيط من documentElement.clientWidth/clientHeight، ونسبة بكسل جهازك، والاتجاه. نقطة التوقف هي عرض نافذة العرض حيث يتغير التخطيط — تتكدس الأعمدة، تنهار القائمة، يتغير حجم الخط — وتطبق أطر مثل Tailwind CSS أنماطا من مجموعة من العروض المسماة إلى الأعلى. المرجع أدناه يبرز النطاق الذي يقع فيه عرضك، ولوحة الاختبار القابلة للسحب تبلغ عن نقطة التوقف التي سيصل إليها عرضها، بحيث يمكنك معاينة مكون دون تغيير حجم النافذة بالكامل. كل شيء يعمل محليا؛ لا يتم رفع أي شيء.

إذا بدت الأرقام غير صحيحة، فهناك عدة عوامل تقع بين دقة لوحتك ونافذة العرض التي تراها الصفحة. تُخصم واجهة المتصفح وأشرطة التمرير من المساحة القابلة للاستخدام، ويقلل تكبير الصفحة عدد بكسل CSS — بحيث ينخفض innerWidth دون تحريك النافذة — وكذلك تحجيم نظام التشغيل لشاشة العرض، ولهذا السبب يمكن لشاشتين متطابقتين الإبلاغ عن أحجام مختلفة. على الهواتف، وسم meta viewport، <meta name="viewport" content="width=device-width, initial-scale=1">، يجعل الصفحة تتخذ عرض الجهاز بدلا من محاكاة سطح مكتب بعرض ~980 بكسل، لذا فإن نافذة عرض بعرض 390 بكسل عند DPR 3 تكون على لوحة بعرض حوالي 1170 بكسل فعلي. لرؤية الدقة الفعلية الكاملة لشاشتك وكثافة البكسل، استخدم أداتي What Is My Screen Size وScreen Resolution Test.

نقاط التوقف الاستجابية الشائعة