Responsive design requires knowing the exact viewport dimensions of target devices. This tool provides a reference for common device viewport sizes including iPhones, Android phones, iPads, and desktops, showing dimensions, aspect ratios, and the corresponding CSS breakpoint category.

Use this as a quick reference when writing media queries or testing responsive layouts. The visual preview shows the relative size of each viewport.

Tester

Results

How to Use

  1. Select a device from the dropdown
  2. Or choose Custom and enter specific dimensions
  3. Click Calculate to see viewport details
  4. Use the dimensions in your CSS media queries

FAQ

Are these CSS pixels or physical pixels?

These are CSS (logical) pixels, which is what you use in media queries. Physical pixels are typically 2-3x higher due to device pixel ratio.

Do these sizes change?

Device manufacturers may introduce new screen sizes. These values represent common viewport sizes as of 2024.

Is my data safe when I use Mobile Viewport Tester?

Yes. All calculations run entirely in your browser. Your data is never sent to a server, stored in a database, or shared with anyone. You can use this tool with complete confidence that your information remains private.

Learn More

Guides that feature this tool