كاشف حجم الشاشة

مرجع

منفذ العرض مقابل دقة الشاشة — ما الفرق؟

منفذ العرض (Viewport) هو المنطقة المرئية من صفحة الويب داخل نافذة المتصفح، يُقاس بوحدات بكسل CSS (window.innerWidth × window.innerHeight). يتغير عند تغيير حجم المتصفح أو فتح DevTools. دقة الشاشة هي إجمالي عدد البكسلات لشاشتك الفعلية (screen.width × screen.height) — وهذا ثابت بحسب العتاد وإعدادات العرض. لتصميم الويب المتجاوب، منفذ العرض هو ما يهم — فهو يحدد أي استعلامات وسائط CSS ونقاط توقف نشطة.

ما هي نسبة بكسل الجهاز (DPR)؟

نسبة بكسل الجهاز (DPR) تخبرك كم بكسل فعلي (عتادي) يقابل بكسل CSS واحد. DPR بقيمة 1 تعني تطابق 1:1 (شاشات عادية). DPR بقيمة 2 تعني شاشة Retina/HiDPI — كل بكسل CSS يُعرض بـ 4 بكسلات فعلية (2×2)، مما ينتج نصاً وصوراً أكثر وضوحاً. DPR بقيمة 3 شائعة في الهواتف الذكية الراقية. هذا مهم لـ: تقديم صور @2x/@3x لشاشات DPR العالية، وفهم لماذا لقطات الشاشة على شاشات Retina ضعف الدقة المتوقعة، وتصحيح مشاكل التخطيط التي تظهر فقط عند قيم DPR محددة.

حالات استخدام كشف الشاشة

اختبار التصميم المتجاوب — تحقق من أن نقاط التوقف CSS تنشط عند عروض منفذ العرض الصحيحة بدون فتح DevTools. تقارير الأخطاء — شارك أبعاد منفذ العرض الدقيقة ودقة الشاشة وDPR عند الإبلاغ عن مشاكل العرض للمطورين. تخطيط لقطات الشاشة — اعرف الأبعاد الدقيقة قبل أخذ لقطات للتوثيق أو قوائم متجر التطبيقات. تحجيم الإعلانات والبنرات — تحقق من أن أبعاد منفذ العرض تطابق أحجام مساحات الإعلانات المطلوبة.

الخصوصية

أبعاد الشاشة تُقرأ محلياً من واجهات المتصفح. لا يتم إرسال أي بيانات إلى أي خادم.