Apple Watch Series 6 (40mm): CSS viewport of 162 × 197 px, resolution and responsive test

Why test your site on Apple Watch Series 6 (40mm)?

CSS viewport resolution of Apple Watch Series 6 (40mm)

This is the width your CSS considers. All your breakpoints and media queries compare to this value, not the number of physical pixels on the panel.

The height remains indicative: Safari, Chrome, and other mobile browsers reduce the visible area with their address bar, which folds on scroll.

Be cautious when analyzing your statistics: some tools only report the manufacturer resolution, never the CSS viewport presented here.

Pixel density of Apple Watch Series 6 (40mm)

The device pixel ratio of Apple Watch Series 6 (40mm) is 2. Your images should therefore be exported 2 times larger than their display size, otherwise they will appear softened on this screen.

Manufacturer resolution of Apple Watch Series 6 (40mm)

This is the actual number of pixels on the panel. This value does not affect your layouts, but it's the one reported by technical specifications and most analytics tools.

• 324 pixels in width
• 394 pixels in height
• 325 pixels per inch (ppi)
• 1.6 inches diagonal, or 4 cm
• Screen ratio of 11:9

User-Agent of Apple Watch Series 6 (40mm)

This string is what the browser of Apple Watch Series 6 (40mm) sends. It is useful for your automated tests, reading your server logs, and server-side detection.

atc/1.0 watchOS/8 model/Watch6,2 hwp/t8301 build/18T567 (6; dt:226)

Media queries and code snippets for Apple Watch Series 6 (40mm)

These snippets are generated from the exact characteristics of Apple Watch Series 6 (40mm). Copy them directly into your stylesheet or configuration.

@media only screen and (min-width: 162px) and (max-width: 196px) {
  /* Apple Watch Series 6 (40mm) */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* High-density images and icons */
}

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'apple-watch-serie-6': '162px'
    }
  }
}

const isDeviceWidth = window.matchMedia('(min-width: 162px)').matches;
const isHighDensity = window.devicePixelRatio >= 2;

<meta name="viewport" content="width=device-width, initial-scale=1">

Free Apple Watch Series 6 (40mm) simulator

Mobile FIRST includes Apple Watch Series 6 (40mm): your page displays in a viewport of 162 x 197 pixels, with the model's User-Agent, touch events, and scrolling behavior of a real mobile.

This is where the difference with Chrome DevTools' responsive mode is seen: DevTools resizes a window, the extension replicates the device's browser and allows exporting shareable screenshots and videos.

1. 01 Install the extension — Add Mobile FIRST to Chrome, Firefox, or Edge. Installation is free and requires no account.
2. 02 Open the page to test — Go to the URL to check, including a local address like localhost:3000.
3. 03 Choose Apple Watch Series 6 (40mm) — Select Apple Watch Series 6 (40mm) from the list of devices. The viewport switches to 162 x 197 pixels, and the mobile User-Agent is applied.
4. 04 Check rendering — Scroll, change orientation, test your forms, then capture an image or video to share.

Comparison with similar models

The neighboring formats of Apple Watch Series 6 (40mm) are the ones to test right after, as they reveal poorly placed breakpoints.

Apple Watch Series 6 (40mm) PNG mockup

To present a mockup or capture in a realistic frame, the transparent mockup of Apple Watch Series 6 (40mm) is available for free download.

Frequently asked questions about Apple Watch Series 6 (40mm)

Updated on August 15, 2026