{"uid":"cap_3inUhA5wE1DJVx5XhjAGC","slug":"css-design-calc-pixel-density-calculator-28e74866","name":"CSS Design Calc – Pixel Density Calculator","description":"Screen pixel density (PPI) from resolution and diagonal, physical size, CSS viewport at a device pixel ratio, and image widths.","url":"https://css-design-calc.x402tookit.com/pixel-density?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["widthPx","heightPx","diagonalIn"],"properties":{"dpr":{"type":"number","description":"Device pixel ratio the browser reports (default 1)"},"widthPx":{"type":"number","description":"Horizontal resolution in physical pixels"},"cssWidth":{"type":"number","description":"A CSS width in px to compute image pixel widths for (default 100)"},"heightPx":{"type":"number","description":"Vertical resolution in physical pixels"},"diagonalIn":{"type":"number","description":"Screen diagonal in inches"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"dpr":{"type":["null","number"]},"ppi":{"type":["null","number"]},"asOf":{"type":["null","string"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"widthMm":{"type":["null","number"]},"degraded":{"type":["boolean","null"]},"heightMm":{"type":["null","number"]},"ppiClass":{"type":["null","string"]},"disclaimer":{"type":["null","string"]},"dotPitchMm":{"type":["null","number"]},"megapixels":{"type":["null","number"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"widthInches":{"type":["null","number"]},"heightInches":{"type":["null","number"]},"cssViewportWidth":{"type":["null","number"]},"cssViewportHeight":{"type":["null","number"]},"cssPixelPhysicalMm":{"type":["null","number"]},"imageWidthsForCssWidth":{"type":["null","object"],"properties":{"1x":{"type":["null","number"]},"2x":{"type":["null","number"]},"3x":{"type":["null","number"]},"1.5x":{"type":["null","number"]},"cssWidth":{"type":["null","number"]},"atThisDpr":{"type":["null","number"]}}},"idealDprForReferencePixel":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_VJdFzcZSD2tBjYJAWk-hV","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Computes screen PPI, physical dimensions, CSS viewport size, dot pitch, and image widths for a given screen resolution and diagonal.","exampleAgentPrompt":"What's the pixel density and CSS viewport size for a 2560×1440 screen with a 27-inch diagonal and a device pixel ratio of 2? Also tell me the image widths I'd need for a 300px CSS width.","exampleUseCases":[{"title":"Responsive image srcset planning","prompt":"I'm building a responsive webpage and need to know what image sizes to serve for a 400px CSS width on a 1920×1080 screen with a 24-inch diagonal — what physical pixel widths do I need for 1x, 1.5x, 2x, and 3x DPR?"},{"title":"Monitor retina quality check","prompt":"Is a 27-inch 2560×1440 monitor considered retina or high-DPI? Can you calculate its PPI and tell me what class it falls into?"},{"title":"Mobile screen physical size estimation","prompt":"For a phone with a 1080×2400 resolution and a 6.5-inch diagonal, what are the physical screen dimensions in millimeters and what's the dot pitch?"}],"resultDescription":"Returns a structured object with PPI value and PPI class (e.g. retina, standard), physical width and height in mm and inches, dot pitch in mm, megapixel count, CSS viewport width and height at the given DPR, CSS pixel size in mm, and image pixel widths for 1x/1.5x/2x/3x DPR at the specified CSS width, plus a human-readable summary and verdict.","failureModes":["Missing required query params (widthPx, heightPx, diagonalIn) returns an error","Non-positive or physically impossible values (e.g. diagonalIn=0) may return null fields or an error","Very unusual DPR values may result in degraded or partially null output","Network timeout if the service is temporarily unavailable"],"whenToPreferThis":"Use this endpoint when you need precise, multi-faceted screen metric calculations — PPI, physical dimensions, CSS viewport, dot pitch, and responsive image widths — all in a single call. Prefer it over manual calculations or general-purpose math tools when working with CSS/responsive design workflows, evaluating display quality, or planning srcset breakpoints.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T00:35:32.882Z","isFirstParty":false,"canonicalSlug":"css-design-calc-pixel-density-calculator-28e74866"}