Skip to main content
WebCraft Kit
Mobile & Apps New

DP, SP, PT, PX & Mobile Screen Density Matrix Calculator

Calculate and scale UI dimensions across iOS point scales (@1x, @2x, @3x) and Android screen densities (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). Includes accessibility text scaling and Swift/Kotlin code snippets.

Comprehensive Multi-Platform Matrix: Instant bi-directional conversion between Android DP / SP, iOS Points (PT), physical Pixels (PX), and Web CSS Pixels
Complete Android Bucket Breakdown: Real-time calculation across ldpi (0.75x), mdpi (1.0x baseline), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x), and xxxhdpi (4.0x)
iOS Retina Scaling: Calculates exact physical pixel assets for standard @1x, Retina @2x, and Super Retina @3x displays
Accessibility & Dynamic Type Simulator: Preview SP to PX scaling under Android Accessibility font scale factors (1.0x to 2.0x) and iOS Dynamic Type sizes
Hardware PPI & Screen Diagonal Math: Input physical width, height, and diagonal inches to compute exact PPI, aspect ratio, and baseline density bucket
Ready-to-use Code Snippets: Instant copyable sizing constants in Swift (SwiftUI/UIKit), Kotlin (Jetpack Compose/XML), and Flutter (Dart)
WebCraftKit Manifesto 100% Client-Side Engine

Air-Gapped Privacy & Zero-Latency Developer Utilities

Every cryptographic algorithm, schema transformer, color space converter, and binary extractor runs entirely in your browser RAM. Your tokens, API secrets, and source code are never sent to external servers.

Zero Server Telemetry
•
Sub-Millisecond Execution
•
70 Production Tools
Read Architecture Story →
Comprehensive Technical Manual

The Comprehensive Guide to Screen Densities, DP, SP, Points, and High-DPI Mobile Displays

In-depth specifications, architectural mechanics, real-world code implementations, and industry best practices.

01

The Foundations of Resolution Independence: Density-Independent Pixels vs Points

Physical display hardware renders images using microscopic physical pixels (PX). Because mobile displays vary from low-density 130 PPI budget screens to 460+ PPI Super Retina OLED panels, specifying UI dimensions in raw hardware pixels causes identical layouts to render microscopic on high-density devices. To achieve resolution independence, mobile operating systems abstract physical pixels: Google Android defines the Density-Independent Pixel (DP), anchored to a 160 DPI baseline where 1dp = 1px, while Apple iOS defines the Point (PT), anchored to 163 PPI where 1pt = 1px on legacy @1x displays.

Implementation Example 
// Universal Density Scaling Mathematical Formulas
// Android: px = dp * (dpi / 160)
// iOS:     px = pt * scale_factor (where @2x = 2.0, @3x = 3.0)
// SP:      px = sp * (dpi / 160) * font_scale_factor
// PPI:     sqrt(width_px^2 + height_px^2) / diagonal_inches
02

Android Density Buckets and Apple Retina Display Architecture

Android groups screen densities into six generalized buckets: ldpi (~120 dpi, 0.75x ratio), mdpi (~160 dpi, 1.0x baseline), hdpi (~240 dpi, 1.5x ratio), xhdpi (~320 dpi, 2.0x ratio), xxhdpi (~480 dpi, 3.0x ratio), and xxxhdpi (~640 dpi, 4.0x ratio). In Apple iOS architecture, vector rendering utilizes points, which are multiplied by the device scale factor: @1x (iPad 2), @2x (iPhone 11, iPad Air, iPhone SE), and @3x (iPhone X, 12, 13, 14, 15, 16 Pro Super Retina XDR). In Flutter, all dimensions use logical pixels (identical to iOS points / Android DP at mdpi).

Implementation Example 
// Kotlin / Swift runtime density conversion utilities

// 1. Android Kotlin Extension
fun Int.dpToPx(context: Context): Int {
    val density = context.resources.displayMetrics.density
    return (this * density + 0.5f).toInt()
}

// 2. iOS Swift Extension (UIKit)
extension CGFloat {
    var toPixels: CGFloat {
        return self * UIScreen.main.scale
    }
}
03

Step-by-Step: Designing an Adaptive Card Component from Figma to Code

Step 1: Determine your design tool baseline. Figma typically uses an iOS 393 x 852 pt frame or Android 360 x 800 dp frame. Step 2: Input your base component measurements into the density calculator (e.g., 16dp outer margin, 48dp minimum touch button height, 18sp headline text). Step 3: Review the live multi-density matrix to verify raster asset sizes required for design handoff (mdpi: 48px, hdpi: 72px, xhdpi: 96px, xxhdpi: 144px, xxxhdpi: 192px). Step 4: Simulate Android Accessibility font scaling (1.3x and 2.0x) to confirm text containers expand without clipping. Step 5: Copy ready-to-use SwiftUI and Jetpack Compose code snippets directly into your UI codebase.

Implementation Example 
// Native UI implementation: Scaled 48dp touch target and padding

// 1. Jetpack Compose (Kotlin)
@Composable
fun ActionButton(text: String, onClick: () -> Unit) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(48.dp) // Auto-scales across density buckets
            .padding(horizontal = 16.dp)
    ) {
        Text(text = text, fontSize = 16.sp) // Respects Dynamic Text scaling
    }
}

// 2. SwiftUI (iOS)
struct ActionButtonView: View {
    var body: some View {
        Button(action: {}) {
            Text("Continue")
                .font(.system(size: 16, weight: .semibold))
                .frame(maxWidth: .infinity)
                .frame(height: 48) // In Points (PT)
        }
        .padding(.horizontal, 16)
    }
}
04

Handling Dynamic Type and Screen Density Programmatically in Mobile Codebases

Modern mobile accessibility requires apps to gracefully support user-configured text scaling. In Android, SP (Scale-independent Pixels) scales dynamically with user font preferences in device Settings. In iOS, Dynamic Type adjusts point sizes based on UIFontMetrics. Testing text components under 200% font scale prevents layout clipping and overlapping labels.

Implementation Example 
// React Native & Flutter device pixel ratio helpers

// 1. React Native PixelRatio
import { PixelRatio } from 'react-native';
const dpValue = 24;
const physicalPx = PixelRatio.getPixelSizeForLayoutSize(dpValue);
const fontScale = PixelRatio.getFontScale(); // e.g., 1.5 for large text

// 2. Flutter MediaQuery
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
  final pixelRatio = MediaQuery.of(context).devicePixelRatio;
  final textScale = MediaQuery.textScalerOf(context);
  return Container(width: 48.0); // 48 logical pixels
}
05

Touch Target Guidelines (WCAG / Material / HIG) & Local Processing

Both Apple Human Interface Guidelines (HIG) and Google Material Design enforce minimum touch target dimensions to ensure accessibility: Apple mandates a minimum 44 x 44 pt interactive target, Google Material 3 mandates 48 x 48 dp (at least 7mm x 7mm physically), and WCAG 2.2 Level AAA Target Size requires at least 44 x 44 CSS pixels. WebCraftKit density calculations run 100% locally in your browser with instant mathematical accuracy and zero tracking.

Knowledge Base & Clarifications

Frequently Asked Questions: DPI & DP Calculator

Got questions about how DPI & DP Calculator operates, client-side cryptographic safety, or performance limits? Explore common answers below.

Complementary Utilities

Related Developer Tools

View all in Mobile & Apps →
Mobile & Apps Essential

App Icon Generator

Generate complete Xcode AppIcon.appiconset with Contents.json and Android mipmap adaptive icon suites from a single 1024x1024 master image.

Open Tool →
Mobile & Apps Popular

Screenshot Studio

Wrap app screenshots inside iPhone 16 Pro and Pixel 9 device frames with customizable gradient backdrops, headlines, and export store-ready PNGs.

Open Tool →
CSS & Design A11y

Color Contrast Checker

Calculate contrast ratios to guarantee WCAG 2.1 AA and AAA compliance.

Open Tool →
CSS & Design New

CSS Loader Generator

Customizable pure CSS loading spinners, skeleton animations, and bouncing indicators with single-click copy.

Open Tool →