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

تعرّف على الحجم الفعلي لنافذة متصفحك بالنسبة لصفحة الويب. تقرأ هذه الأداة عرض وارتفاع منفذ العرض بوحدات CSS pixel، ونسبة البكسل الخاصة بجهازك واتجاهه، وتُظهر نقطة التوقف الاستجابية التي يقع فيها الحجم الحالي - كل ذلك بشكل مباشر. غيّر حجم النافذة وستتحدث جميع القيم فورًا.

—×—px

غيّر حجم نافذة متصفحك وشاهد هذه القيم تتحدث مباشرة.

جارٍ قراءة منفذ العرض…نقطة التوقف: —

منفذ العرض

—

window.innerWidth × innerHeight (CSS px)

منفذ عرض التخطيط

—

حجم عميل documentElement

نسبة بكسل الجهاز

—

CSS px → physical px

الاتجاه

—

أعرض من الارتفاع، أو أطول من العرض

نقاط توقف Tailwind CSS

يُبرَز النطاق الذي يقع فيه منفذ عرضك أثناء تغيير الحجم.

البادئة	أقل عرض	يُطبَّق ابتداءً من
base	0px	0 – 639px
sm	640px	640 – 767px
md	768px	768 – 1023px
lg	1024px	1024 – 1279px
xl	1280px	1280 – 1535px
2xl	1536px	1536px+

فئات الأجهزة

الجوال

<640px

الجهاز اللوحي

640–1023px

اللابتوب

1024–1439px

سطح المكتب

≥1440px

لوحة اختبار قابلة لتغيير الحجم

اسحب الزاوية السفلية اليمنى لتغيير حجم هذه اللوحة. تُبلغ عن حجمها الخاص ونقطة التوقف التي يصل إليها هذا العرض - مقياس استجابة سريع.

حجم اللوحة—نقطة توقف اللوحة—

—

اسحب زاويتي السفلية اليمنى ↘

أحجام منفذ العرض الشائعة للأجهزة

منافذ عرض تقريبية بوحدة CSS pixel للوضع العمودي كمرجع - تختلف القيم الفعلية حسب المتصفح ونظام التشغيل.

الجهاز	منفذ العرض (CSS px)	DPR
iPhone SE	375 × 667	2×
iPhone 15 / 14 Pro	393 × 852	3×
Pixel 8	412 × 915	2.6×
iPad mini	768 × 1024	2×
iPad Pro 11"	834 × 1194	2×
Surface Pro	912 × 1368	2×
Laptop (720p)	1280 × 720	1×
Laptop (1080p)	1366 × 768	1×
Desktop (1080p)	1920 × 1080	1×

ما هو منفذ العرض (Viewport)

منفذ العرض هو المساحة المرئية المتاحة لصفحة الويب لعرض محتواها - أي منطقة المحتوى داخل نافذة متصفحك، دون احتساب علامات التبويب أو شريط العنوان أو شريط الإشارات المرجعية. لهذا السبب يكون دائمًا تقريبًا أصغر من دقة شاشتك: فالشاشة هي اللوحة بأكملها، بينما منفذ العرض هو مجرد الجزء الذي يمكن للصفحة استخدامه. يعرض window.innerWidth وwindow.innerHeight تلك المساحة بوحدات CSS pixel، بينما يعرض documentElement.clientWidth/clientHeight منفذ عرض التخطيط (نفس المساحة مطروحًا منها عرض شريط تمرير تقليدي، عند وجوده). ولأن منفذ العرض يتغير في اللحظة التي تغيّر فيها حجم النافذة أو تقسّم الشاشة أو تُدير الجهاز، فهو الرقم الذي تستجيب له التصاميم المتجاوبة فعليًا.

CSS pixel مقابل بكسل الجهاز ونسبة devicePixelRatio

الـ CSS pixel هو وحدة تخطيط، وليس نقطة فعلية على اللوحة. في الشاشة القياسية يقابل الـ CSS pixel الواحد بكسلًا فعليًا واحدًا، لكن الشاشات عالية الكثافة من نوع 'Retina' تضغط بكسلين أو ثلاثة بكسلات فعلية في كل CSS pixel لتبدو النصوص أكثر وضوحًا. يخبرك window.devicePixelRatio بهذا المُضاعِف: فالقيمة 2 تعني أن منفذ عرض بعرض 1440 CSS pixel يُرسم باستخدام 2880 بكسل فعلي. تُصمَّم صفحات الويب بوحدات CSS pixel، لذا فإن هاتفًا يُبلغ عن منفذ عرض بعرض 390 بكسل بنسبة DPR تساوي 3 يملك لوحة فعلية بعرض يقارب 1170 بكسل. لمعرفة الدقة الفعلية الكاملة وكثافة البكسل لشاشتك، استخدم أداتي What Is My Screen Size وScreen Resolution Test.

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

نقطة التوقف هي عرض منفذ عرض معين يتغير عنده التصميم - كأن تتراكم الأعمدة، أو تنطوي قائمة، أو يتغير حجم الخط. تُعرّف استعلامات الوسائط في CSS وأطر العمل المساعدة مثل Tailwind CSS مجموعة صغيرة من العروض المسمّاة وتطبّق الأنماط ابتداءً من ذلك العرض فما فوق. القيم الافتراضية في Tailwind هي sm عند 640px، وmd عند 768px، وlg عند 1024px، وxl عند 1280px، و2xl عند 1536px؛ وما دون 640px تكون في النطاق الأساسي بدون بادئة. يُبرز المرجع أدناه النطاق النشط أثناء تغيير الحجم، وتُبلغ اللوحة التجريبية القابلة للسحب عن نقطة التوقف التي يصل إليها عرضها الخاص - وهي طريقة سريعة لمعاينة سلوك أحد المكونات بأحجام مختلفة دون تغيير حجم نافذتك بالكامل.

لماذا يختلف innerWidth عن عرض الشاشة

هناك عدة عوامل تفصل بين دقة لوحتك ومنفذ العرض الذي تراه الصفحة. تطرح واجهة المتصفح (علامات التبويب وأشرطة الأدوات وشريط التمرير المرئي) من المساحة القابلة للاستخدام. كما يغيّر تكبير الصفحة ذلك: فالتكبير يقلل عدد الـ CSS pixel التي تتسع، لذا ينخفض innerWidth رغم أن النافذة لم تتحرك، كما يؤثر ذلك أيضًا على devicePixelRatio. على الجوال، تخبر وسم منفذ العرض الوصفي - <meta name="viewport" content="width=device-width, initial-scale=1"> - المتصفح بضبط منفذ عرض التخطيط ليكون بعرض الجهاز نفسه بدلاً من التظاهر بأنه سطح مكتب بعرض ~980px، ولهذا تحتاج المواقع المتجاوبة إليه. كما يغيّر تحجيم عرض نظام التشغيل عدد الـ CSS pixel أيضًا، ولهذا يمكن لشاشتين متطابقتين أن تُبلغا عن حجمي منفذ عرض مختلفين.