ما دقة شاشتي؟

ما دقة شاشتي؟

تعرض اللوحة أعلاه ما يُبلِغ به متصفّحك عن شاشتك، ومعه خمسة مستطيلات أخرى يتابعها كذلك. فإن أردت الرقم الرئيسي وحده فهو الأول. وإن أردت أن تعرف هل ذلك الرقم هو دقة عتادك الحقيقية، فالجواب الصادق أن متصفّحك غير ملزَم بإخبارك — وهذه الصفحة تُريك من أين يأتي هذا الالتباس بالضبط بدل أن تغطّيه.

دقة الشاشة عدُّ بكسلات: 1920 عرضًا في 1080 ارتفاعًا هي أكثر شاشات المكاتب انتشارًا في العالم. والتعقيد أن المتصفّحات لا تقيس ببكسلات العتاد، بل ببكسلات CSS، وهي وحدة فُصلت عن اللوحة عمدًا كي تبقى الصفحة في الحجم المادي نفسه تقريبًا على هاتف وحاسوب محمول وتلفاز. فعلى شاشة تعمل بتحجيم 200% يغطّي بكسل CSS الواحد بكسلين من العتاد في كل اتجاه، فيُبلِغ المتصفّح بنصف الأرقام التي تحملها ورقة المواصفات.

ولهذا كثيرًا ما يُبلِغ حاسوب محمول بدقة 4K عرضه 3840 بالرقم 1920. ليس هذا عطبًا ولا شيء مكسور — بل هي الوحدة تؤدّي عملها.

كيف تقرأ النتائج

1. ابدأ بالرقم الكبير. وهو screen.width في screen.height، بوحدة بكسل CSS. ولأكثر الناس، على شاشة بتحجيم 100%، هو دقة العتاد ولا يلزم شيء آخر.
2. قارن المستطيلات الستة. كل واحد منها قياس مختلف، والفجوات بينها ذات معنى: إطار المتصفّح، وشريط التمرير، وشريط المهام، والتكبير باللمس. غيّر حجم النافذة وراقب أي الأسطر يتحرّك.
3. اقرأ التقدير وتحفّظه. الضرب في نسبة بكسل الجهاز يعطي تخمينًا لبكسلات عتادك، والقائمة تحته تُظهر كل تركيبات التحجيم والتكبير التي تُنتج النسبة نفسها تمامًا.

ستة مستطيلات، وكل أداة تخلط بين بعضها

تعرّف مواصفة CSSOM View كلًّا منها على حدة، وهي أشياء مختلفة حقًّا. فـ screen.width هي الشاشة كلها. و screen.availWidth هي الشاشة ناقص ما يحجزه نظام التشغيل: شريط مهام ويندوز، وشريط قوائم ماك أو إس ورصيف تطبيقاته. و outerWidth هي نافذة المتصفّح بأشرطتها. و innerWidth هي إطار العرض، أي المساحة التي تستطيع الصفحة الرسم فيها فعلًا، ويشمل شريط التمرير. و document.documentElement.clientWidth هو إطار العرض نفسه بلا ذلك الشريط، فالفرق بين هذين السطرين هو عرض شريط التمرير حرفيًّا. أما visualViewport فهي الجزء الذي تراه الآن، وهو ما يتغيّر عند التكبير بإصبعين على الهاتف أو حين تصعد لوحة مفاتيح على الشاشة.

وأكثر اللبس في تقارير الأخطاء يأتي من مقارنة اثنين من هذه كأنهما واحد. فالتخطيط الذي «ينكسر عند 1280» قد ينكسر بنافذة عرضها 1280، أو بإطار عرض 1280، أو بشاشة 1280 داخلها نافذة أضيق، وهذه ثلاثة اختبارات مختلفة.

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

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

هناك سببان مختلفان، وكلاهما مكتوب في المواصفة لا من أهواء متصفّح بعينه.

الأول أن للمتصفّح أن يختلق الرقم. فوحدة CSSOM View تعرّف screen.width بأنه عرض «مساحة الشاشة المكشوفة للويب»، وتعرّف تلك المساحة بأنها «أحد التاليين: مساحة جهاز الإخراج بوحدة بكسل CSS، أو مساحة إطار العرض بوحدة بكسل CSS». فالمتصفّح الذي يعطيك مقاس نافذته بدل مقاس شاشتك مطابقٌ للمواصفة تمامًا. وهذا مقصود: يقول القسم 15 من الوثيقة نفسها إن واجهة Screen «قد تُستعمل مدخلًا لخوارزميات البصمة الرقمية»، وإن لوكلاء المستخدم «أن يختاروا إخفاء المعلومات عن مقاس الشاشة أو إعداداتها أو تكميمها» حمايةً للمستخدم. والمتصفّحات والأوضاع المشدّدة ضد التتبّع تفعل ذلك بالضبط. وجدير بالذكر أن موقع MDN يصف الخاصية بأنها ببساطة «عرض الشاشة بوحدة بكسل CSS»، وهو خيار المواصفة الأول معروضًا كأنه الخيار الوحيد.

والسبب الثاني يهدم الحيلة البديهية. فضرب المقاس بوحدة CSS في devicePixelRatio يبدو كأنه يستعيد بكسلات العتاد، وتعريف المواصفة نفسه يمنع ذلك: تلك النسبة هي حجم بكسل CSS «عند تكبير الصفحة الحالي» مقسومًا على حجم بكسل الجهاز. فتكبير الصفحة مطويٌّ في الرقم نفسه الذي يحمل تحجيم الشاشة. والنسبة 2 تعني شاشةً عالية الكثافة عند تكبير 100%، أو شاشةً عادية عند 200%، ولا شيء في الجافاسكربت يخبرك أيّهما — اضغط Ctrl مع علامة الزائد بضع مرات وراقب التقدير أعلاه يتغيّر بينما شاشتك لا تتغيّر.

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

الأسماء، وما هو منها خطأ

النسبة أعلاه مختزلة اختزالًا دقيقًا، وهذا يكشف أكثر مما يبدو. فـ 1366×768، وهي أشيع لوحات الحواسيب المحمولة قرابة عقد، تُسمّى عادةً 16:9 وليست كذلك: فهي مختزلةً 683:384، لأن 16:9 من 768 تساوي 1365.33 ولا يمكن أن يكون لديك ثلث بكسل. والفارق 0.05% فقط فلا ينتبه أحد، لكنها ليست الشكل نفسه.

أما الشاشات العريضة جدًّا التي تُباع على أنها 21:9 فأبعد من ذلك، ولا تتّفق حتى فيما بينها. فـ 2560×1080 هي 64:27، و3440×1440 هي 43:18 — على بُعد 1.6% و2.4% من 21:9 على الترتيب، وشكلاهما مختلفان رغم اشتراكهما في اسم التسويق. وكذلك 1280×1024 هي 5:4 بالضبط لا 4:3 التي يوحي بها زمنها، ولهذا كانت الصور تظهر ممطوطة على تلك الشاشات.

و«4K» تسمّي شيئين مختلفين. فـ 3840×2160، وهي التي في التلفازات والشاشات، هي 16:9 بالضبط واسمها الصحيح UHD. أما 4096×2160، وهي معيار السينما، فهي 256:135 — شكل مختلف حقًّا، على بُعد 6.7% من 16:9. والأداة تسمّي كلتيهما تسميةً صحيحة بدل معاملة 4K كدقة واحدة. ومع أن الاسم يوحي بأربعة آلاف من شيء ما، فالأصحّ منه أنفع: تحوي UHD أربعة أضعاف بكسلات Full HD بالضبط.

لماذا هي مجانية؟

كل ما هنا يقيسه متصفّحك أنت ويُعرض في الحال. فلا يُرسَل أي قياس إلى أي جهة، ولا يُسجَّل شيء، ولا حساب تُنشئه — والصفحة لا تكلّفنا شيئًا لكل زائر سوى بضعة كيلوبايتات من الجافاسكربت.

بلا تسجيل، وبلا حدود، وبلا علامة مائية على أي شيء تنسخه.