MacBook Pro 14" screen size
The MacBook Pro 14" renders websites at 1512×982 CSS pixels in portrait and 982×1512 in landscape.
Viewport specs
| CSS viewport (portrait) | 1512 × 982 px |
| CSS viewport (landscape) | 982 × 1512 px |
| Aspect ratio | 1.540:1 |
| Breakpoint category | desktop |
| Device type | laptop / desktop |
| Brand | Desktop |
CSS media query for MacBook Pro 14"
/* MacBook Pro 14" — portrait */
@media (max-width: 1512px) {
/* your styles */
}
/* MacBook Pro 14" — landscape */
@media (max-width: 982px) and (orientation: landscape) {
/* your styles */
}Testing tips for MacBook Pro 14"
Viewports this wide are where layouts most often break: check that nothing scrolls sideways, buttons are at least 44px tall, and body text is 16px or larger.
Compare it against a tablet and a desktop width in the same view to catch breakpoint jumps — Responsivly's multi-view does this in one click.
FAQ
What is the MacBook Pro 14" viewport size?
The MacBook Pro 14" has a CSS viewport of 1512×982 pixels in portrait orientation and 982×1512 pixels in landscape.
What media query targets the MacBook Pro 14"?
Use @media (max-width: 1512px) for portrait styles, or @media (min-width: 1512px) and (max-width: 1512px) to target this exact width.
How do I test my website on the MacBook Pro 14"?
Open Responsivly, paste your URL and pick MacBook Pro 14" from the device list — it renders your site at 1512×982 for free, no signup.