How to Capture Mobile vs Desktop Screenshots Accurately

Capturing accurate mobile and desktop screenshots requires understanding viewport sizes and device-specific considerations. This guide shows you how to capture device-specific screenshots accurately.

Device Presets vs Custom Viewports

Device Presets

PeekShot provides device presets for common devices:

• Mobile: Common mobile device sizes (e.g., iPhone, Android)

• Tablet: Common tablet sizes (e.g., iPad)

• Desktop: Common desktop resolutions

Presets are convenient and ensure consistent sizing.

Custom Viewports

For precise control, set custom width and height:

• Match specific device dimensions exactly

• Test custom breakpoints

• Simulate specific screen sizes

Common Device Sizes

Mobile Devices

• iPhone 12/13/14: 390x844 pixels

• iPhone SE: 375x667 pixels

• Android (common): 360x640 pixels or 412x915 pixels

• Small mobile: 320x568 pixels

Tablet Devices

• iPad: 768x1024 pixels (portrait) or 1024x768 pixels (landscape)

• iPad Pro: 1024x1366 pixels (portrait) or 1366x1024 pixels (landscape)

• Android tablet: 800x1280 pixels or 1280x800 pixels

Desktop Breakpoints

• Small desktop: 1024x768 pixels

• Standard desktop: 1366x768 pixels

• Large desktop: 1920x1080 pixels

• Wide desktop: 2560x1440 pixels

Mobile-Specific Considerations

Touch Targets

Mobile designs often have larger touch targets. Screenshots will show these appropriately sized elements.

Responsive Design

Many sites adapt layout for mobile:

• Single-column layouts

• Hamburger menus

• Larger text and buttons

• Simplified navigation

Viewport Meta Tag

Sites may use viewport meta tags that affect mobile rendering. PeekShot handles this automatically based on your viewport size.

Desktop Considerations

Wide Screens

Desktop viewports are typically wider:

• Multi-column layouts

• Sidebars and navigation

• More content visible at once

Multiple Breakpoints

Test different desktop sizes:

• Small desktop (1024px) - older monitors

• Standard (1366px) - most common

• Large (1920px+) - modern monitors

Responsive Breakpoints

Many sites have breakpoints at:

• 768px (tablet to desktop)

• 1024px (small to large desktop)

• 1440px (large desktop)

Test these breakpoints to see how layouts change.

Testing Responsive Designs

Multiple Viewports

Capture the same URL at different viewport sizes:

1. Start with mobile (e.g., 375x667)

2. Test tablet (e.g., 768x1024)

3. Test desktop (e.g., 1920x1080)

4. Compare how layouts adapt

Breakpoint Testing

Test specific breakpoints where layouts change:

• Just below breakpoint (e.g., 767px)

• At breakpoint (e.g., 768px)

• Just above breakpoint (e.g., 769px)

Orientation Testing

For mobile/tablet, test both orientations:

• Portrait: 375x667 (mobile) or 768x1024 (tablet)

• Landscape: 667x375 (mobile) or 1024x768 (tablet)

Best Practices for Accurate Device Simulation

• Use exact device dimensions: Match viewport to actual device sizes

• Test multiple sizes: Don't assume one size represents all devices

• Consider orientation: Test both portrait and landscape for mobile/tablet

• Account for browser chrome: Actual browser viewports may be smaller due to UI

• Test breakpoints: Capture at responsive design breakpoints

• Use consistent sizes: Use the same viewport sizes for comparison screenshots

Setting Viewport in PeekShot

In the Playground

1. Select a device preset, or

2. Set custom width and height

3. Configure other options

4. Capture

Via API

{
  "url": "https://example.com",
  "viewport": {
    "width": 375,
    "height": 667
  }
}