Device mockups to download in transparent PNG
Download free, realistic, vector, and transparent device mockups in PNG format for your websites, mobile apps, presentation decks, and responsive QA testing.
Authentic Proportions Across All Screen Classes
iPhone 16 Pro MaxFlagship
Apple flagship with titanium frame, ultra-thin border, and extended Dynamic Island safe zone.
@media screen and (max-width: 430px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3) {
/* Targeted styles for iPhone 16 Pro Max (Portrait) */
:root {
--safe-area-top: 59px;
--safe-area-bottom: 34px;
--safe-area-left: 0px;
--safe-area-right: 0px;
}
}iPhones & Apple Devices (6)
Pixel-accurate Dynamic Islands, camera notches, and titanium metal finishes.
iPhone 16 Pro Max
430 × 932 px • 3x Retina
iPhone 16 Pro
402 × 874 px • 3x Retina
iPhone 15 Pro
393 × 852 px • 3x Retina
iPhone 14 Pro
393 × 852 px • 3x Retina
iPhone 14 / 13
390 × 844 px • 3x Retina
iPhone SE (3rd Gen)
375 × 667 px • 2x Retina
Samsung Galaxy Devices (2)
Quad HD+ AMOLED displays, centered punch-holes, and One UI viewport scaling.
Galaxy S24 Ultra
384 × 824 px • 3x Retina
Galaxy S24
360 × 780 px • 3x Retina
Google Pixel Devices (4)
Pure Android 15 rendering baselines, Chromium defaults, and camera visor styles.
Google Pixel 9 Pro
412 × 924 px • 2.87x Retina
Google Pixel 8 Pro
412 × 892 px • 2.75x Retina
OnePlus 12
412 × 915 px • 3.5x Retina
Google Pixel Fold
678 × 720 px • 2.62x Retina
Tablets & Foldable Mockups (7)
iPad Pro tandem OLEDs, compact tablets, and adaptive folding screen viewports.
Google Pixel Fold
678 × 720 px • 2.62x Retina
Galaxy Z Fold 6
768 × 948 px • 2.5x Retina
Galaxy Z Flip 6
360 × 880 px • 3x Retina
iPad Pro 13" (M4)
1024 × 1366 px • 2x Retina
iPad Air 11" (M2)
820 × 1180 px • 2x Retina
iPad Mini (6th Gen)
744 × 1133 px • 2x Retina
Galaxy Tab S9 Ultra
928 × 1485 px • 2x Retina
Displays, Laptops and Monitors (6)
MacBook Pro notch viewports, iMac 4.5K retina, and UltraWide 21:9 monitors.
MacBook Pro 16" (M3 Max)
1728 × 1117 px • 2x Retina
MacBook Air 13" (M3)
1470 × 956 px • 2x Retina
iMac 24" 4.5K Retina
2240 × 1260 px • 2x Retina
Desktop Full HD (1080p)
1920 × 1080 px • 1x Retina
4K UltraWide Curved (21:9)
2560 × 1080 px • 1x Retina
Apple Watch Ultra 2
205 × 251 px • 2x Retina
Complete Technical Data Sheets
Side-by-side comparison of CSS viewports, physical pixel densities, aspect ratios, and safe area insets.
| Device Name | Category | CSS Viewport | Physical Pixels | DPR | Aspect Ratio | Bezel Style | Action |
|---|---|---|---|---|---|---|---|
| iPhone 16 Pro MaxFlagship | mobile | 430 × 932 px | 1290 × 2796 px | 3x | 19.5:9 | island | Inspect→ |
| iPhone 16 ProPopular | mobile | 402 × 874 px | 1206 × 2622 px | 3x | 19.5:9 | island | Inspect→ |
| iPhone 15 Pro | mobile | 393 × 852 px | 1179 × 2556 px | 3x | 19.5:9 | island | Inspect→ |
| iPhone 14 Pro | mobile | 393 × 852 px | 1179 × 2556 px | 3x | 19.5:9 | island | Inspect→ |
| iPhone 14 / 13 | mobile | 390 × 844 px | 1170 × 2532 px | 3x | 19.5:9 | notch | Inspect→ |
| iPhone SE (3rd Gen) | mobile | 375 × 667 px | 750 × 1334 px | 2x | 16:9 | notch | Inspect→ |
| Galaxy S24 UltraFlagship | mobile | 384 × 824 px | 1152 × 2472 px | 3x | 19.5:9 | punch-hole | Inspect→ |
| Galaxy S24 | mobile | 360 × 780 px | 1080 × 2340 px | 3x | 19.5:9 | punch-hole | Inspect→ |
| Google Pixel 9 ProPure Android | mobile | 412 × 924 px | 1182 × 2652 px | 2.87x | 20:9 | punch-hole | Inspect→ |
| Google Pixel 8 Pro | mobile | 412 × 892 px | 1133 × 2453 px | 2.75x | 20:9 | punch-hole | Inspect→ |
| OnePlus 12 | mobile | 412 × 915 px | 1442 × 3203 px | 3.5x | 19.8:9 | punch-hole | Inspect→ |
| Google Pixel FoldFoldable | foldable | 678 × 720 px | 1776 × 1886 px | 2.62x | 6:5 | punch-hole | Inspect→ |
| Galaxy Z Fold 6New Foldable | foldable | 768 × 948 px | 1920 × 2370 px | 2.5x | 20.9:18 | punch-hole | Inspect→ |
| Galaxy Z Flip 6 | foldable | 360 × 880 px | 1080 × 2640 px | 3x | 22:9 | punch-hole | Inspect→ |
| iPad Pro 13" (M4)Retina XDR | tablet | 1024 × 1366 px | 2048 × 2732 px | 2x | 4:3 | notch | Inspect→ |
| iPad Air 11" (M2) | tablet | 820 × 1180 px | 1640 × 2360 px | 2x | 1.43:1 | notch | Inspect→ |
| iPad Mini (6th Gen) | tablet | 744 × 1133 px | 1488 × 2266 px | 2x | 3:2 | notch | Inspect→ |
| Galaxy Tab S9 UltraGiant AMOLED | tablet | 928 × 1485 px | 1856 × 2970 px | 2x | 16:10 | notch | Inspect→ |
| MacBook Pro 16" (M3 Max)Studio | desktop | 1728 × 1117 px | 3456 × 2234 px | 2x | 16:10 | monitor | Inspect→ |
| MacBook Air 13" (M3)Popular Laptop | desktop | 1470 × 956 px | 2940 × 1912 px | 2x | 16:10 | monitor | Inspect→ |
| iMac 24" 4.5K RetinaAll-In-One | desktop | 2240 × 1260 px | 4480 × 2520 px | 2x | 16:9 | monitor | Inspect→ |
| Desktop Full HD (1080p)Global Standard | desktop | 1920 × 1080 px | 1920 × 1080 px | 1x | 16:9 | monitor | Inspect→ |
| 4K UltraWide Curved (21:9)UltraWide | desktop | 2560 × 1080 px | 2560 × 1080 px | 1x | 21:9 | monitor | Inspect→ |
| Apple Watch Ultra 2Wearable | watch | 205 × 251 px | 410 × 502 px | 2x | 4:5 | watch | Inspect→ |
What is a device mockup?
A device mockup is a high-fidelity visual representation of an authentic hardware chassis (such as an iPhone, Samsung Galaxy, or MacBook Pro) used by frontend developers and designers to showcase web interfaces in realistic physical contexts.
Unlike generic flat screenshots, ScreenShift mockups include authentic hardware bezels, camera cutouts, Dynamic Islands, and pixel-density ratios (Retina DPR). This allows engineering teams to catch layout overflow, test safe area notch collisions, and present polished deliverables to stakeholders.
Frequently asked questions
Are these mockups free for commercial projects?
Yes. All screenshots and transparent framed PNG exports generated with ScreenShift can be freely used in commercial apps, client presentations, and portfolio showcases with zero royalty fees.
Can I export framed mockups of localhost development servers?
Yes. ScreenShift runs directly as a Chrome extension on your localhost:3000 server, automatically rendering live websites within physical device frames with 1-click 2x Retina PNG export.
How do I test safe area notch insets?
Simply copy our ready-to-use CSS env(safe-area-inset-top) snippets provided in the inspector above to prevent content clipping under Dynamic Islands.
Test all 40+ mockups live on your localhost.
Install ScreenShift from the Chrome Web Store in 10 seconds. Enjoy zero-config hot reload, touch gestures, and 1-click transparent device frame exports.