SavePage
·SavePage Team

Mobile Screenshots vs Desktop: What You Need to Know

mobileviewportguide

When you capture a website screenshot, the viewport dimensions determine what you see. A desktop viewport at 1440x900 shows a completely different layout than a mobile viewport at 375x812. Understanding these differences is essential for accurate screenshots.

Viewport basics

The viewport is the visible area of the web page. When a browser renders a page, it uses the viewport dimensions to determine layout, media query breakpoints, and element sizing.

Common viewport sizes:

| Device | Width | Height | |--------|-------|--------| | Desktop (standard) | 1440 | 900 | | Desktop (wide) | 1920 | 1080 | | Laptop | 1366 | 768 | | iPad | 768 | 1024 | | iPhone 14 | 390 | 844 | | iPhone SE | 375 | 667 | | Samsung Galaxy S21 | 360 | 800 |

Responsive breakpoints

Most modern websites use CSS media queries to adapt their layout at different widths. Common breakpoints:

  • 320-480px -- Mobile phones (portrait)
  • 481-768px -- Tablets (portrait)
  • 769-1024px -- Tablets (landscape) and small laptops
  • 1025-1440px -- Standard desktops
  • 1441px+ -- Wide screens

When you capture a screenshot, the viewport width triggers the appropriate breakpoint. A 375px wide screenshot shows the mobile layout. A 1440px wide screenshot shows the desktop layout.

Device scale factor

Physical pixels and CSS pixels are not the same thing on modern devices. An iPhone with a 3x Retina display has 1170 physical pixels across but reports 390 CSS pixels. The device scale factor (also called device pixel ratio) is the multiplier.

For screenshots, the scale factor determines the output resolution:

  • Scale 1 -- 1440x900 viewport produces a 1440x900 pixel image
  • Scale 2 -- 1440x900 viewport produces a 2880x1800 pixel image

Use scale=2 for retina-quality screenshots that look sharp on high-DPI displays.

Full page on mobile

Mobile pages are often much longer than their desktop equivalents. Content that fits in two columns on desktop stacks vertically on mobile, creating long scrollable pages.

The fullpage parameter captures the entire scrollable height. Combined with a mobile viewport width, this gives you the complete mobile experience in a single image.

Touch-specific UI

Some websites show different UI elements on mobile: hamburger menus instead of navigation bars, bottom sheets instead of dropdowns, swipeable carousels instead of grids. These are typically controlled by viewport width and media queries, so they appear correctly in screenshots with mobile dimensions.

However, some sites detect touch capability via JavaScript ('ontouchstart' in window). Since headless Chrome does not report touch capability by default, these touch-specific elements may not appear. The device emulation features in the rendering engine can address this.

Practical recommendations

For full visual coverage, capture both viewports:

# Desktop
/v1/?url=https://example.com&width=1440&height=900

# Mobile
/v1/?url=https://example.com&width=375&height=812

For documentation or marketing screenshots, use scale=2 for crisp images. For automated testing, scale=1 keeps file sizes smaller and comparison faster.

All posts