خطوات الاستخدام
قم بقياس العرض أو الارتفاع الفعلي للمنطقة المعروضة على الشاشة بوحدات البكسل الفيزيائية. هذه هي البكسلات التي ينتجها الجهاز فعليًا، وتُعرف بدقة الشاشة الأصلية. على سبيل المثال، إذا كان لديك شاشة بدقة 1440 بكسل في العرض، أدخل 1440.
أدخل عدد وحدات البكسل CSS (وحدات البكسل المنطقية) التي تستخدمها في التصميم لنفس المنطقة. بكسل CSS هو الوحدة القياسية التي نستخدمها في تطوير الويب، وعادة ما تكون أصغر من البكسل الفيزيائي في الشاشات عالية الكثافة. على سبيل المثال، إذا كنت تصمم عرضًا بعرض 720 بكسل CSS، أدخل 720.
اضغط على زر الحساب. ستقوم الحاسبة بقسمة البكسل الفيزيائي على بكسل CSS للحصول على نسبة بكسل الجهاز (DPR). الصيغة هي: DPR = physicalPixels / cssPixels. النتيجة توضح لك عدد البكسلات الفيزيائية التي يتطلبها كل بكسل CSS لعرض المحتوى بوضوح.
أمثلة محلولة
تطبيقات عملية على حاسبة نسبة بكسل الجهاز بخطوات الحل كاملة.
الحل
أولاً، نحدد البكسل الفيزيائي المقابل لذلك العرض. نسبة الأبعاد ثابتة. في iPhone 13 Pro Max، العرض الفيزيائي 1284 بكسل يقابل 390 بكسل CSS. إذن لكل بكسل CSS، هناك 1284/390 ≈ 3.29 بكسل فيزيائي. هذا هو DPR للجهاز (3.29). الآن، لعنصر بعرض 300 بكسل CSS، نحتاج إلى 300 * 3.29 ≈ 987 بكسل فيزيائي. لكن السؤال الأصلي: إذا أدخلنا 300 بكسل CSS و987 بكسل فيزيائي، ستكون الحسبة: DPR = 987 / 300 = 3.29. الإجابة: DPR = 3.29. هذا يعني أن كل بكسل CSS يحتاج إلى 3.29 بكسل فيزيائي للحصول على أفضل وضوح.
الحل
أولاً، نحدد DPR الفعلي للشاشة بدون تكبير: DPR = 1920 / 1536 = 1.25 (نظرًا لأن 1536 هو العرض المنطقي بعد التكبير). عند تكبير 125%، كل بكسل CSS يتوافق مع 1.25 بكسل فيزيائي. لكن إذا كنا نريد قياس منطقة معينة، فإن العرض المنطقي الإجمالي هو 1536 بكسل CSS. النسبة ثابتة. لعنصر بعرض 100 بكسل CSS، البكسل الفيزيائي المقابل = 100 * (1920/1536) = 100 * 1.25 = 125 بكسل فيزيائي. لذا ندخل 100 بكسل CSS و125 بكسل فيزيائي، فالناتج DPR = 1.25. هذا يتطابق مع معامل التكبير.