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
| Width | Viewport | Type | Use it for | QA note |
|---|---|---|---|---|
| 320x568 | Minimum phone | Phone | Smallest safe layout | Catches cramped nav, buttons, and fixed-width content. |
| 360x740 | Small Android | Phone | Mobile baseline | A practical default for narrow Chrome Android testing. |
| 375x667 | iPhone SE | Phone | Small iOS | Good for Safari UI, forms, and short screens. |
| 390x844 | Modern iPhone | Phone | Default iPhone portrait | Common iPhone 12/13/14-style CSS viewport width. |
| 393x852 | iPhone 15 | Phone | Modern mobile QA | A strong everyday mobile target. |
| 412x915 | Pixel | Phone | Android portrait | Checks a wider phone without leaving mobile layout. |
| 430x932 | Large phone | Phone | Large mobile | Useful before tablet-specific layout rules kick in. |
| 480x900 | Mobile ceiling | Breakpoint | Phone-to-small-tablet edge | Common max-width breakpoint for mobile-only CSS. |
| 640x900 | Small tablet | Breakpoint | Two-column entry | Where cards, filters, and forms often gain space. |
| 768x1024 | Tablet portrait | Tablet | Tablet baseline | Classic tablet and CSS breakpoint width. |
| 820x1180 | iPad portrait | Tablet | Modern tablet portrait | Good for tablet navigation and content columns. |
| 900x1100 | Docs width | Browser | Reading layout | Useful for docs, articles, sidebars, and code blocks. |
| 1024x768 | Tablet landscape | Tablet | Small desktop edge | Where desktop navigation often appears too early. |
| 1280x800 | Small laptop | Desktop | Compact desktop | Good for app chrome, sidebars, and dense dashboards. |
| 1366x768 | Laptop | Desktop | Common browser window | Still one of the most useful desktop QA widths. |
| 1440x900 | Desktop | Desktop | Design review | Common MacBook and desktop design handoff width. |
| 1536x960 | Large laptop | Desktop | Wide app layout | Checks max-width containers and dashboards. |
| 1920x1080 | Full HD | Desktop | Wide monitor | Catches 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 checklistTry 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.
