Xiaomi Redmi Note 9 Pro: CSS viewport of 393 × 873 px, resolution and responsive test

Why test your site on Xiaomi Redmi Note 9 Pro?

CSS viewport resolution of Xiaomi Redmi Note 9 Pro

This resolution is what your stylesheet actually manipulates. It determines the applied breakpoint, the number of displayed columns, and the size of your images.

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 Xiaomi Redmi Note 9 Pro

The device pixel ratio of Xiaomi Redmi Note 9 Pro is 2.75. Each CSS pixel is thus rendered by 2.75 physical pixels, making any image provided in simple resolution immediately visible.

Manufacturer resolution of Xiaomi Redmi Note 9 Pro

This is the number of physical pixels on the screen, as announced by the manufacturer. Useful for preparing your image exports, useless for your media queries.

• 1080 pixels in width
• 2400 pixels in height
• 395 pixels per inch (ppi)
• 6.7 inches diagonal, or 16.9 cm
• Screen ratio of 20:9

Media queries and code snippets for Xiaomi Redmi Note 9 Pro

These snippets are generated from the exact characteristics of Xiaomi Redmi Note 9 Pro. Copy them directly into your stylesheet or configuration.

@media only screen and (min-width: 393px) and (max-width: 872px) {
  /* Xiaomi Redmi Note 9 Pro */
}

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

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xiaomi-redmi-note-9-pro': '393px'
    }
  }
}

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

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

Free Xiaomi Redmi Note 9 Pro simulator

Mobile FIRST does not yet include Xiaomi Redmi Note 9 Pro, but a model with the same format is available. You can already validate your breakpoints and display density.

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 Xiaomi Redmi Note 9 Pro — Select Xiaomi Redmi Note 9 Pro from the list of devices. The viewport switches to 393 x 873 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 Xiaomi Redmi Note 9 Pro are the ones to test right after, as they reveal poorly placed breakpoints.

Frequently asked questions about Xiaomi Redmi Note 9 Pro

Updated on August 15, 2026