مجاني وفوري — لا يتطلب التسجيل

Pixel Ratio Calculator

The Pixel Ratio Calculator converts between CSS pixels and physical (device) pixels using the device pixel ratio (DPR). Calculate the actual rendered resolution on Retina and HiDPI displays, and determine optimal image sizes for crisp rendering.

Pixel Ratio Calculator — معاينة حية للنسبة

CSS Pixels

Device Pixel Ratio

Physical Pixels

—

⚖️

Proportion Solver

A : B = C : D — Enter any 3 values

📊

Results

Visual ratio breakdown

Solved Proportion

—

Simplified

—

Percentages

—

Decimal

—

Fraction

—

Visual Ratio

Part A: —

Part B: —

✨

Ratio Simplifier

Reduce any ratio to its simplest form

Value A

Value B

📊

Simplified Result

Reduced to lowest terms

Simplified Ratio

—

GCD Used

—

Percentages

—

Decimal Ratio

—

Fraction

—

Visual Ratio

Part A: —

Part B: —

📐

Ratio Scaler

Multiply a ratio by a scale factor

Value A

Value B

Scale Factor

📊

Scaled Result

Ratio after scaling

Scaled Ratio

—

Original

—

Factor

—

Percentages

—

Simplified

—

Visual Ratio

🕐 Recent Calculations

📭

No calculations yet. Start computing above!

What is Pixel Ratio?

Device pixel ratio (DPR) is the ratio of physical pixels to CSS pixels on a display. A DPR of 2 (Retina) means each CSS pixel is rendered using a 2×2 grid of physical pixels. A 375×812 CSS viewport on an iPhone at 3× DPR actually renders 1125×2436 physical pixels.

Understanding DPR is essential for web developers to serve appropriately sized images. A 200×200 CSS image needs a 400×400 source file for 2× displays and 600×600 for 3× displays to appear crisp. Without accounting for DPR, images appear blurry on high-density screens.

القوانين والمعادلات المستخدمة

تستخدم Pixel Ratio Calculator هذه 5 معادلات أساسية:

1 Physical Pixels from CSS ▼

Physical Pixels = CSS Pixels × Device Pixel Ratio

A 375px CSS width at 3× DPR: Physical = 375 × 3 = 1125 physical pixels.

2 CSS Pixels from Physical ▼

CSS Pixels = Physical Pixels / Device Pixel Ratio

A 2560×1440 display at 2× DPR renders as 1280×720 CSS pixels.

3 Image Size for Target DPR ▼

Required Image Size = Display Size (CSS) × Target DPR

A 300×200 CSS image area needs 600×400 source for 2× DPR, 900×600 for 3× DPR.

كيفية استخدام هذه الحاسبة

لاستخدام حاسبة النسب هذه، اتبع 3 خطوات بسيطة:

أدخل القيم

اكتب قيم النسبة المعروفة في حقول الإدخال. اترك حقلاً واحداً فارغاً — هذا هو المتغير المجهول الذي تحله حاسبة النسب.

اختر الوضع

حدد وضع النسبة — حل، تبسيط، أو تغيير الحجم. يطبق كل وضع معادلات مختلفة على قيم الإدخال الخاصة بك.

احصل على النتائج

انقر فوق احسب. تعرض شاشة النتائج الإجابة مع شريط نسبة مرئي، ومخطط دائري، وتفصيل حل خطوة بخطوة.

أمثلة على مسائل وحلول خطوة بخطوة

فيما يلي 3 مسائل توضيحية مع حلول مفصلة خطوة بخطوة باستخدام حاسبة النسب هذه:

المدخلات 1 iPhone 14 Pro: 393×852 CSS at 3× DPR

1 Physical Width: 393 × 3 = 1179 pixels

2 Physical Height: 852 × 3 = 2556 pixels

3 Total pixels: 1179 × 2556 = 3,013,524

✓ Physical resolution: 1179 × 2556 (~3 million pixels)

المدخلات 2 Image for 2× and 3× displays

1 CSS display size: 400 × 300 pixels

2 2× image: 800 × 600 pixels

3 3× image: 1200 × 900 pixels

✓ Serve 800×600 for 2× and 1200×900 for 3× displays

المدخلات 3 Calculate DPR from screen specs

1 MacBook Pro: 3024×1964 physical pixels

2 Displayed as 1512×982 CSS pixels

3 DPR = 3024/1512 = 2.0

✓ Device pixel ratio is 2.0 (Retina)

الأسئلة الشائعة

What is device pixel ratio (DPR)? ▼

DPR is the ratio between physical display pixels and CSS (logical) pixels. DPR 1 = standard displays. DPR 2 = Retina/HiDPI (Apple, many laptops). DPR 3 = high-end phones (iPhones, Samsung flagships).

How do I find my screen's pixel ratio? ▼

In a browser, open the console and type window.devicePixelRatio. Common values: 1 (standard monitors), 1.25 or 1.5 (Windows scaling), 2 (MacBook Retina), 3 (iPhone Pro).

Why do images look blurry on Retina displays? ▼

A 200×200 pixel image displayed at 200×200 CSS on a 2× DPR screen is stretched to 400×400 physical pixels, causing blur. The solution: use a 400×400 source image to match the physical pixel count.

How does pixel ratio affect website performance? ▼

Higher DPR images are larger files (4× file size at 2× DPR). Use responsive images (srcset attribute) to serve appropriately sized images based on DPR, balancing quality and page load speed.

What is the pixel ratio for 4K monitors? ▼

A 4K (3840×2160) monitor at native resolution has DPR 1.0. With Windows scaling at 150%, effective DPR ≈ 1.5. At 200% scaling (common on 27" 4K), DPR = 2.0, rendering content at 1920×1080 CSS pixels.

اعرف المزيد عن النسب

ما هي النسبة تحديداً؟

النسبة هي مقارنة رياضية لحجم كميتين أو أكثر توضح صلتها ببعضها البعض. تعني الكتابة أ : ب 'مقابل كل أ وحدة من المادة الأولى هناك ب وحدة من المادة الثانية'. على سبيل المثال، النسبة 3 : 4 تعني أنه عند تخصيص 3 حصص لـ أ يتم ربط 4 حصص لـ ب. تستخدم في الطهي، وخلط المواد، والتحليل المالي، والهندسة.

كيف أحل التناسب؟

التناسب هو معادلة تعبر عن تساوي نسبتين: أ : ب = جـ : د. لإيجاد المجهول، نضرب القطر المعلوم ثم نقسم على الضلع المقابل. إذا كان د مجهولاً: د = (ب × جـ) / أ. تعمل هذه القاعدة دائماً لأن حاصل ضرب الطرفين يساوي حاصل ضرب الوسطين (أ × د = ب × جـ). تقوم حاسبتنا بحل ذلك تلقائياً.

كيف أبسط النسبة؟

لتبسيط النسبة، أوجد القاسم المشترك الأكبر للرقمين واقسم كلا الرقمين عليه. على سبيل المثال، لنسبة 24 : 36 القاسم المشترك الأكبر هو 12. بقسمة الطرفين نحصل على النسبة الأبسط — 2 : 3. تقوم حاسبتنا بحساب القاسم المشترك واختصار النسبة نيابة عنك.

ما هو تغيير مقياس النسبة وتكبير حجمها؟

القياس يعني ضرب كلا حدي النسبة في نفس المعامل للحصول على نسبة مكافئة بحجم أكبر أو أصغر. على سبيل المثال، ضرب النسبة 2 : 5 في 3 يعطي 6 : 15. هذا مطلوب عند تعديل مقادير الطهي (مثل زيادة عدد الحصص)، وقياس المخططات والخرائط.

ما الفرق بين النسبة والكسر؟

تقارن النسبة (أ : B) بين جزأين متكافئين في القيمة (علاقة جزء إلى جزء)، بينما يعبر الكسر (أ/ب) غالباً عن حصة جزء واحد من الكل (علاقة جزء إلى كل). مع ذلك، رياضياً يمكن تمثيل أي نسبة ككسر: 3 : 4 تساوي الكسر 3/4 (أو 0.75). يكمن الاختلاف في سياق الاستخدام.