Native resolution 396 × 484 px at 2× · 326 PPI · 1.9″ · 9:11. Design at 198 × 242 and export assets at 2×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 198 × 242 px |
| CSS viewport (landscape) | 242 × 198 px |
| Native resolution | 396 × 484 px |
| Device pixel ratio | 2× |
| Pixel density | 326 PPI |
| Screen diagonal | 1.9 in |
| Panel size | 1.21 × 1.48 in |
| Aspect ratio | 9:11 (exact 9:11) |
| Total pixels | 0.19 MP |
| Released | 2021 |
| Operating system | watchOS |
Among the 15 watchs on this site, the Apple Watch Series 7 45mm has the 7th largest CSS viewport area. Its 198 px width is 8 px above the 190 px average for this category.
Targeting the Apple Watch Series 7 45mm in CSS
Device-specific media queries are brittle — a new model with the same width will not match. Use them for genuine per-device fixes only, and prefer width buckets for layout.
/* Target Apple Watch Series 7 45mm specifically */
@media only screen
and (device-width: 198px)
and (device-height: 242px)
and (-webkit-device-pixel-ratio: 2) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 198px) { /* … */ }Compare with other Smartwatches models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| Apple Watch Series 7 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Series 8 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Series 6 44mm | 184 × 224 | 368 × 448 | 2× | 326 | 1.78″ |
| Apple Watch SE 44mm | 184 × 224 | 368 × 448 | 2× | 326 | 1.76″ |
| Apple Watch Series 8 41mm | 176 × 215 | 352 × 430 | 2× | 326 | 1.69″ |
| Apple Watch Series 6 40mm | 162 × 197 | 324 × 394 | 2× | 326 | 1.57″ |
| Apple Watch SE 40mm | 162 × 197 | 324 × 394 | 2× | 326 | 1.55″ |
| Apple Watch Series 9 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Ultra 2 | 205 × 251 | 410 × 502 | 2× | 338 | 1.92″ |
Questions about the Apple Watch Series 7 45mm screen
What is the screen size of the Apple Watch Series 7 45mm?
The Apple Watch Series 7 45mm has a 1.9-inch display. In CSS the viewport measures 198 × 242 px in portrait, and the panel itself has 396 × 484 physical pixels at 326 PPI.
What resolution should I design for on the Apple Watch Series 7 45mm?
Design at 198 × 242 and export assets at 2×. That gives you 396 × 484 px images, which is exactly what the panel renders. Designing directly at 396 × 484 means every measurement is 2 times larger than the CSS values you will write.
What is the device pixel ratio of the Apple Watch Series 7 45mm?
The Apple Watch Series 7 45mm reports a device pixel ratio of 2. One CSS pixel therefore covers 4 device pixels. You can read it in JavaScript with window.devicePixelRatio.
Which other devices have the same viewport as the Apple Watch Series 7 45mm?
2 other devices share the 198 × 242 CSS viewport: Apple Watch Series 9 45mm, Apple Watch Series 8 45mm. A layout that works on one works on all of them.
Related
window.innerWidth/innerHeight reported by the stock browser with no browser chrome. See methodology and sources.