Free responsive design tool

Browser Size Cheat Sheet

Use a practical table of common browser widths, then turn your site type into a QA viewport pack and CSS breakpoint notes you can copy into a release plan.
Current QA pack

22 widths

8 core targets - 6 CSS breakpoints

Plan browser sizes

QA focus
hero composition, nav collapse, proof grids, pricing cards, and CTA density
Type
Marketing site
Core targets
8
QA widths
22
CSS notes
6

QA viewport pack

Core device widths plus just-below and just-above breakpoint checks.
360px
390px
430px
479px
480px
481px
639px
640px
641px
767px
768px
769px
1023px
1024px
1025px
1279px
1280px
1281px
1439px
1440px
1441px
1920px

Core browser targets

Use these as the named sizes in screenshots, QA tickets, and design review.

360x740

Small Android
A practical default for narrow Chrome Android testing.

390x844

Modern iPhone
Common iPhone 12/13/14-style CSS viewport width.

430x932

Large phone
Useful before tablet-specific layout rules kick in.

768x1024

Tablet portrait
Classic tablet and CSS breakpoint width.

1024x768

Tablet landscape
Where desktop navigation often appears too early.

1280x800

Small laptop
Good for app chrome, sidebars, and dense dashboards.

1440x900

Desktop
Common MacBook and desktop design handoff width.

1920x1080

Full HD
Catches over-stretched heroes, media, and tables.

CSS breakpoint notes

Paste into a scratch file before turning the final widths into production CSS.
/* Marketing site breakpoint notes for Target page. Keep only rules that fix real layout changes. */

@media (min-width: 480px) {
  /* large-mobile adjustment before tablet rules; watch hero composition, nav collapse, proof grids, pricing cards, and CTA density */
}

@media (min-width: 640px) {
  /* large-mobile adjustment before tablet rules; watch hero composition, nav collapse, proof grids, pricing cards, and CTA density */
}

@media (min-width: 768px) {
  /* tablet entry point for stacked-to-adjacent layout changes */
}

@media (min-width: 1024px) {
  /* desktop transition; confirm navigation, sidebars, and grid density */
}

@media (min-width: 1280px) {
  /* desktop layout width; check container max-width and dense sections */
}

@media (min-width: 1440px) {
  /* desktop layout width; check container max-width and dense sections */
}

Responsive QA notes

Start with 360x740 and complete the core marketing site flow before widening.
Run the QA viewport pack at 360, 390, 430, 479, 480, 481, 639, 640, 641, 767, 768, 769, and the remaining exported widths.
Check headline wrapping and CTA visibility on the first fold.
Verify proof, logo, pricing, testimonial, and FAQ grids at phone, tablet, and desktop widths.
Inspect sticky headers, cookie banners, and chat widgets around the primary CTA.
Compare just below, at, and just above each CSS breakpoint before shipping.
Capture screenshots after fixes so the same viewport pack can be reused in the next release.

Common browser and viewport widths

Static CSS-pixel reference for phones, tablets, laptop browser windows, desktop, and breakpoint edges.
18 reference sizes
WidthViewportTypeUse it forQA note
320x568Minimum phonePhoneSmallest safe layoutCatches cramped nav, buttons, and fixed-width content.
360x740Small AndroidPhoneMobile baselineA practical default for narrow Chrome Android testing.
375x667iPhone SEPhoneSmall iOSGood for Safari UI, forms, and short screens.
390x844Modern iPhonePhoneDefault iPhone portraitCommon iPhone 12/13/14-style CSS viewport width.
393x852iPhone 15PhoneModern mobile QAA strong everyday mobile target.
412x915PixelPhoneAndroid portraitChecks a wider phone without leaving mobile layout.
430x932Large phonePhoneLarge mobileUseful before tablet-specific layout rules kick in.
480x900Mobile ceilingBreakpointPhone-to-small-tablet edgeCommon max-width breakpoint for mobile-only CSS.
640x900Small tabletBreakpointTwo-column entryWhere cards, filters, and forms often gain space.
768x1024Tablet portraitTabletTablet baselineClassic tablet and CSS breakpoint width.
820x1180iPad portraitTabletModern tablet portraitGood for tablet navigation and content columns.
900x1100Docs widthBrowserReading layoutUseful for docs, articles, sidebars, and code blocks.
1024x768Tablet landscapeTabletSmall desktop edgeWhere desktop navigation often appears too early.
1280x800Small laptopDesktopCompact desktopGood for app chrome, sidebars, and dense dashboards.
1366x768LaptopDesktopCommon browser windowStill one of the most useful desktop QA widths.
1440x900DesktopDesktopDesign reviewCommon MacBook and desktop design handoff width.
1536x960Large laptopDesktopWide app layoutChecks max-width containers and dashboards.
1920x1080Full HDDesktopWide monitorCatches over-stretched heroes, media, and tables.

Need to turn the cheat sheet into a real QA pass?

Use this reference to plan widths, then move into the focused Sizzy tools for viewport checks, breakpoints, screenshots, and release checklists.
Check one viewportiPhone viewport sizesFind breakpointsGenerate screenshotsBuild QA checklist
Try Sizzy

What browser sizes should I test first?

Start with a small phone, modern phone, tablet portrait, tablet landscape or small desktop, laptop, desktop, and wide desktop. Add breakpoint edge widths only where your CSS changes layout.

Are device sizes and browser viewport sizes the same?

No. Device screens include hardware pixels and browser UI. Responsive CSS works against the viewport in CSS pixels, so this cheat sheet focuses on practical browser viewport widths.

Should every width become a CSS breakpoint?

No. Use the QA pack to find layout changes, then keep CSS breakpoints only where they fix a real responsive problem.

Sizzy

© 2026 Zekit. All rights reserved.