Device Viewport Reference
Complete viewport dimensions, physical resolution, and display specs for all Samsung Galaxy S24 models — essential for cross-platform responsive design.
The Galaxy S24 has a CSS viewport of 360×780 pixels at a 3x device pixel ratio, giving a physical resolution of 1080×2340. The S24+ and S24 Ultra use 384×832 CSS pixels, with the Ultra running a higher 3.5x pixel ratio.
Galaxy S24: 360×780 CSS pixels, 3x device pixel ratio, 1080×2340 physical resolution, 6.2-inch display at 416 PPI.
Galaxy S24+: 384×832 CSS pixels, 3x device pixel ratio, 1152×2496 physical resolution, 6.7-inch display at 390 PPI.
Galaxy S24 Ultra: 384×832 CSS pixels, 3.5x device pixel ratio, 1440×3120 physical resolution, 6.8-inch display at 505 PPI.
Galaxy S24 FE: 360×780 CSS pixels, 3x device pixel ratio, 1080×2340 physical resolution, 6.7-inch display at 385 PPI.
Galaxy S24 (360×780) has a narrower CSS viewport than iPhone 15 (393×852), so it shows slightly less horizontal content. Galaxy S24 Ultra (384×832) sits between the two. Pixel 8 and Pixel 8 Pro both report 412×915, with pixel ratios of 2.625 and 3.5 respectively.
Galaxy S23 matches the S24 at 360×780, and Galaxy S23 Ultra reports 384×824 — near-identical to the S24 Ultra. iPhone 15 Pro Max is the widest common phone viewport at 430×932.
When designing for both ecosystems, target 360px as the minimum width. That single decision covers every device in this comparison.
The Galaxy S24's 360px CSS viewport width is the most common Android viewport width, making it the de facto standard for mobile-first design on Android. When you design for 360px, your layout works on the vast majority of Android phones sold in the last five years.
Key differences from iOS development: Android devices use a wider range of device pixel ratios (from 2x to 3.5x), and viewport widths vary more (320px to 412px is the common range). The Galaxy S24 Ultra's 3.5x DPR is notably higher than most devices, meaning it benefits most from high-resolution assets.
Samsung Internet — the default browser on Galaxy devices — uses the Chromium engine but has rendering differences worth testing for. Samsung provides a free Remote Test Lab for testing on real Galaxy hardware.
Samsung's One UI browser and Chrome on Galaxy S24 both support viewport-fit=cover. The camera hole punch is smaller than iPhone's Dynamic Island, so safe-area-inset-top is typically smaller on Galaxy devices.
Galaxy S24 Ultra's 3.5x device pixel ratio means a full-width hero image needs to be at least 1344 physical pixels wide (384 CSS × 3.5) for the sharpest result. Serving a 3x image (1152px) provides virtually identical quality at a lower file size — the difference between 3x and 3.5x is imperceptible to most users.
Samsung's One UI supports AVIF in Samsung Internet 16 and later, making it the best compression choice. WebP is supported in all Galaxy S24 browsers. Both formats save 30–50% file size compared to JPEG at equivalent quality.
Use srcset with 360w, 720w, 1080w and 1440w variants, and a sizes attribute that switches at 384px and 768px. That covers every S24 model without over-serving pixels to the base S24.
The Galaxy S24 has a CSS viewport of 360 × 780 pixels with a 3x device pixel ratio, giving a physical resolution of 1080 × 2340. The Galaxy S24+ uses 384 × 832 CSS pixels, and the Galaxy S24 Ultra uses 384 × 832 at 3.5x DPR for a physical resolution of 1440 × 3120.
Galaxy S24 (360×780) has a narrower CSS viewport than iPhone 15 (393×852). This means Galaxy S24 shows slightly less horizontal content. The Galaxy S24 Ultra at 384px is closer to iPhone 15 but still narrower. When designing for both, target 360px minimum width to cover all devices.
The Galaxy S24 Ultra has a 3.5x device pixel ratio, higher than most smartphones. This means images need to be 3.5× their CSS dimensions for the sharpest rendering — a 100×100 CSS image should ideally be 350×350 physical pixels. In practice, 3x images are acceptable as the difference is barely perceptible.
Use Chrome DevTools' device toolbar with custom dimensions: 360×780 for S24, 384×832 for S24+/Ultra. Samsung also provides Remote Test Lab for testing on real devices. Android Studio's emulator can simulate Galaxy S24 viewports. For quick testing, resize your browser to 360px width.
Yes, Samsung's One UI browser and Chrome on Galaxy S24 support viewport-fit=cover. However, Galaxy S24's camera hole punch is smaller than iPhone's Dynamic Island, so the safe-area-inset-top value is typically smaller. Always test with actual safe area values on Android devices.
The standard 360px mobile breakpoint covers Galaxy S24 perfectly. Most CSS frameworks already target this: Tailwind CSS considers anything below 640px as default mobile, Bootstrap uses 576px as its 'sm' breakpoint. Galaxy S24's 360px width is the most common Android viewport width.