فاحص دقة الشاشة
منفذ العرض والنسبة وكثافة البكسل

ماذا يفعل فاحص دقة الشاشة من أجلك

تختفي أرقام الشاشة غالبًا في ثلاثة أماكن مختلفة. فنظامك يعرف مقاسًا، ونافذة المتصفح تعرف مقاسًا آخر، كما ترى صفحتك مقاسًا ثالثًا. لذلك يضع فاحص دقة الشاشة الثلاثة جنبًا إلى جنب، ثم تصبح الفروق بينها مفهومة أخيرًا.

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

كذلك أربع لوحات تتقاسم صفحة واحدة. ولهذا تنتقل من حجم الشاشة البسيط إلى نسبة الأبعاد وكثافة البكسل ومعدل التحديث دون أن تترك التبويب.

في الواقع كل شيء يعمل في متصفحك. لذلك لا تصل أي من هذه القراءات إلى هذا الموقع، ولا نخزّن شيئًا.

كيف يعمل فاحص دقة الشاشة

أولًا تسأل الأداة متصفحك عن كائن screen. ثم تقيس النافذة نفسها. بعد ذلك تقسم أحدهما على الآخر، لذلك تنتج نسبة البكسل وعدد البكسلات الأصلية من القراءتين نفسهما.

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

ما دقة شاشتي؟

الزوج الرئيسي هو غالبًا ما يأتي من أجله معظم الناس. لذلك يعرض أعلى الصفحة عرض شاشتك وارتفاعها، مكتوبين كما تكتبهما ورقة المواصفات، مثل 1920 في 1080.

يأتي هذا الزوج بالفعل من كائن screen الذي يكشفه متصفحك. ولأن المتصفح يعدّ ببكسلات CSS، يظهر الحاسوب المحمول ذو اللوحة الحادة رقمًا أصغر من الرقم المكتوب على العلبة غالبًا.

بكسلات CSS والبكسلات الأصلية

حتى أبسط شاشة حديثة يسكنها عدّان للبكسل. فبكسل CSS هو الوحدة التي تتحدث بها أوراق الأنماط، أما البكسل الأصلي فهو نقطة حقيقية في اللوحة.

لذلك تضرب الأداة مقاس CSS في نسبة بكسل الجهاز، ثم تطبع المقاس الأصلي تحته. وبذلك شاشة 1512 في 982 بنسبة اثنين تحمل فعلًا 3024 في 1964 نقطة. كما توضّح صفحة MDN عن window.devicePixelRatio القاعدة التي تتبعها المتصفحات.

مساحة الشاشة المتاحة

حتى شاشتك ليست كلها لك. لأن شريط المهام أو الـ dock أو شريط القوائم يحتفظ بشريط، يذكر المتصفح أيضًا عرضًا وارتفاعًا متاحين.

تعرض الأداة الزوجين، لذلك يخبرك الفرق بحجم الأثاث الذي يحجزه سطح مكتبك. وعلى الهاتف يتطابق الزوجان غالبًا، أما على سطح المكتب فنادرًا ما يتطابقان.

عمق الألوان والاتجاه

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

والاتجاه يقول إن كنت في وضع طولي أو عرضي، كما يعطي الزاوية. ولهذا يحدّث الجهاز اللوحي الذي تقلبه السطرين في وقت واحد، كما تشرح صفحة MDN عن screen.orientation.

فاحص حجم منفذ العرض في الصفحة نفسها

منفذ العرض هو بالفعل الجزء من النافذة الذي ترسم فيه صفحتك. لذلك تقيسه اللوحة الثانية مباشرة، ثم تضعه بجوار حجم الشاشة أعلاه.

تظهر هنا قراءتان. فالنافذة تعطي عرضًا، لكن عنصر المستند يعطي عرضًا آخر، وأي فجوة بينهما هي شريط التمرير.

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

لماذا منفذ العرض أصغر من الشاشة

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

كذلك يذهب العرض الطريق نفسه بمجرد ظهور شريط تمرير. لذلك تذكر نافذة مكبّرة على شاشة بعرض 1920 الرقم 1905 للمستند غالبًا، وتلك الـ 15 الناقصة هي الشريط نفسه. كما تسكن قواعد القراءتين في وحدة CSSOM View من W3C.

في أي نقطة فصل أنت

تغيّر معظم المواقع تصميمها غالبًا عند عروض محددة قليلة. لذلك تسمّي الأداة النطاق الذي أنت فيه الآن، من هاتف ضيّق إلى جهاز لوحي حتى سطح مكتب عريض.

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

منفذ العرض المرئي على الهاتف

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

لذلك تذكر الأداة ذلك الصندوق المرئي وبجواره نسبة التكبير. كما تشرح التفاصيل صفحة MDN عن واجهة VisualViewport.

نسبة الأبعاد وكثافة البكسل

ثم تحوّل اللوحة الثالثة مقاسيك إلى أشكال. فهي تختصر حجم الشاشة إلى نسبة أولًا، ثم تحسب كم تتقارب البكسلات.

ويساعد الرقمان كلاهما غالبًا عند اختيار صورة أو فيديو. مثلًا بانر 16:9 يناسب شاشة 1920 في 1080 بالضبط، لكن حاسوب 16:10 يترك شريطًا.

كيف تختصر الأداة نسبة الأبعاد

النسبة ليست في الواقع إلا كسرًا في أبسط صورة. لذلك تقسم الأداة الضلعين على قاسمهما المشترك الأكبر، ويصبح 1920 في 1080 هو 16:9.

ومع ذلك بعض المقاسات لا تنزل على زوج أنيق أبدًا. مثلًا 1366 في 768 يُختصر إلى 683:384، لذلك تسمّي الأداة أقرب نسبة شائعة بجواره أيضًا.

الـ PPI يحتاج قطر شاشتك

لكن البكسل لكل بوصة لا يأتي من المتصفح. لأنه لا يحق لأي صفحة ويب أن تسأل اللوحة عن حجمها بالبوصة، يبقى الرقم فارغًا حتى تكتب القطر بنفسك.

أدخل 27 لشاشة بقياس 27 بوصة، ثم تتولى الأداة الباقي. ثم تقسم القطر الأصلي بالبكسل على قياسك، لذلك تنزل لوحة 3840 في 2160 بقياس 27 بوصة قريبًا من 163 PPI.

معدل التحديث وقدرات العرض

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

كما يحمل كل سطر هنا جواب متصفح، لا بحثًا في العتاد. ولهذا تبقى اللوحة صادقة في هذا الفرق.

معدل التحديث تقدير

في الواقع لا يسلّم أي متصفح معدل التحديث مباشرة. فتعدّ الأداة بدلًا من ذلك إطارات الحركة نحو ثانية، ثم تقرّب العدد إلى أقرب معدل شائع.

لذلك تعامل مع الجواب كقريب لا كدقيق. لأن التبويب المشغول أو موفّر البطارية يسقط إطارات، تذكر لوحة 120 هرتز الرقم 60 أحيانًا وهي تخفض. كما يجلس استدعاء الإطار خلف العدّ في صفحة MDN عن requestAnimationFrame.

نطاق الألوان والنطاق الديناميكي

كذلك يجيب استعلاما وسائط على سؤال اللون. فأحدهما يسأل إن كانت شاشتك تغطي نطاق P3 الأوسع، لكن الآخر يسأل إن كانت تتعامل مع النطاق الديناميكي العالي.

و«نعم» هنا تعني بالفعل أن متصفحك يدّعي القدرة. لذلك تعامل معها كتلميح لقرار CSS، كما يقترح مرجع MDN عن color-gamut، لا كتقرير معايرة.

تلميحات التباين والحركة والمؤشر

كما تقرأ اللوحة نفسها التفضيلات التي تحفظها في نظامك. فالوضع الداكن وتقليل الحركة والتباين الأعلى والألوان القسرية لكل منها سطر أيضًا.

ويكمل المؤشر والتحويم الصورة، لذلك تبدو شاشة اللمس والفأرة مختلفتين فورًا. كما تجلس كل هذه الاستعلامات في مواصفة Media Queries Level 5 من W3C.

ما لا يستطيع فاحص دقة الشاشة هذا إخبارك به

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

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

انسخ التقرير كله

زر واحد يأخذ كل شيء بالفعل. لذلك اضغط «انسخ التقرير» وستنزل كل لوحة في حافظتك كقائمة بسيطة من التسميات والقيم.

كما تلتصق هذه القائمة مباشرة في تذكرة خطأ. ولهذا يستطيع المختبِر أن يقول بالضبط أي شاشة وأي منفذ عرض وأي نسبة أنتجت مشكلة التصميم.

آمن بالتصميم

تعمل الأداة في متصفحك وحده. لذلك هي لا ترسل شيئًا، ولا تخزّن شيئًا. وبذلك تبقى المقاسات التي تقرأها والقطر الذي تكتبه والتقرير الذي تنسخه كلها على جهازك.