Native resolution 324 × 394 px at 2× · 326 PPI · 1.55″ · 1:1.22. Design at 162 × 197 and export assets at 2×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 162 × 197 px |
| CSS viewport (landscape) | 197 × 162 px |
| Native resolution | 324 × 394 px |
| Device pixel ratio | 2× |
| Pixel density | 326 PPI |
| Screen diagonal | 1.55 in |
| Panel size | 0.99 × 1.21 in |
| Aspect ratio | 1:1.22 (exact 162:197) |
| Total pixels | 0.13 MP |
| Released | 2022 |
| Operating system | watchOS |
Among the 15 watchs on this site, the Apple Watch SE 40mm has the 15th largest CSS viewport area. Its 162 px width is 28 px below the 190 px average for this category.
Targeting the Apple Watch SE 40mm 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 SE 40mm specifically */
@media only screen
and (device-width: 162px)
and (device-height: 197px)
and (-webkit-device-pixel-ratio: 2) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 162px) { /* … */ }Compare with other Smartwatches models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| Apple Watch SE 40mm | 162 × 197 | 324 × 394 | 2× | 326 | 1.55″ |
| Apple Watch Series 8 41mm | 176 × 215 | 352 × 430 | 2× | 326 | 1.69″ |
| Apple Watch SE 44mm | 184 × 224 | 368 × 448 | 2× | 326 | 1.76″ |
| Apple Watch Series 8 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Series 9 41mm | 176 × 215 | 352 × 430 | 2× | 326 | 1.69″ |
| Apple Watch Series 9 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Series 7 45mm | 198 × 242 | 396 × 484 | 2× | 326 | 1.9″ |
| Apple Watch Ultra 2 | 205 × 251 | 410 × 502 | 2× | 338 | 1.92″ |
| Apple Watch Series 6 40mm | 162 × 197 | 324 × 394 | 2× | 326 | 1.57″ |
Questions about the Apple Watch SE 40mm screen
What is the screen size of the Apple Watch SE 40mm?
The Apple Watch SE 40mm has a 1.55-inch display. In CSS the viewport measures 162 × 197 px in portrait, and the panel itself has 324 × 394 physical pixels at 326 PPI.
What resolution should I design for on the Apple Watch SE 40mm?
Design at 162 × 197 and export assets at 2×. That gives you 324 × 394 px images, which is exactly what the panel renders. Designing directly at 324 × 394 means every measurement is 2 times larger than the CSS values you will write.
What is the device pixel ratio of the Apple Watch SE 40mm?
The Apple Watch SE 40mm 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 SE 40mm?
1 other device shares the 162 × 197 CSS viewport: Apple Watch Series 6 40mm. 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.