I’m trying to accurately simulate my device in Chrome DevTools and need some clarification.

My actual device has a resolution of 1220×2712 pixels with a DPR (Device Pixel Ratio) of 3. To match it, I created a custom device entry in Chrome DevTools with a 407×904 viewport, as this represents the logical dimensions of my device (physical resolution ÷ DPR). So far, everything works as expected—the contents are displayed correctly, just like on my real device.

To deepen my understanding, I tried changing the DPR value in the corresponding field in DevTools, but I noticed that the rendered output stays the same regardless of the DPR value I enter. It feels like the proportion of the rendered content is independent of the DPR setting, as if only my current monitor's specifications (which are constant) are taken into account.

I then experimented with other viewport sizes. For example, I tried doubling the original dimensions to 814×1808 and adjusted the DPR to 1.5 (to maintain the same scale). However, the output was nowhere near the original proportions. This makes me wonder if 407×904 is the only combination I can use to simulate my device’s exact proportions in Chrome DevTools.

To summarize:

1. Is 407×904 the only valid viewport size to simulate my device's exact proportions, or are there alternative viewport/DPR combinations that would produce the same results?
2. Why does changing the DPR in DevTools appear to have no effect on the rendered proportions?

Any insights would be greatly appreciated! Thank you.

I’m trying to accurately simulate my device in Chrome DevTools and need some clarification.

My actual device has a resolution of 1220×2712 pixels with a DPR (Device Pixel Ratio) of 3. To match it, I created a custom device entry in Chrome DevTools with a 407×904 viewport, as this represents the logical dimensions of my device (physical resolution ÷ DPR). So far, everything works as expected—the contents are displayed correctly, just like on my real device.

To deepen my understanding, I tried changing the DPR value in the corresponding field in DevTools, but I noticed that the rendered output stays the same regardless of the DPR value I enter. It feels like the proportion of the rendered content is independent of the DPR setting, as if only my current monitor's specifications (which are constant) are taken into account.

I then experimented with other viewport sizes. For example, I tried doubling the original dimensions to 814×1808 and adjusted the DPR to 1.5 (to maintain the same scale). However, the output was nowhere near the original proportions. This makes me wonder if 407×904 is the only combination I can use to simulate my device’s exact proportions in Chrome DevTools.

To summarize:

1. Is 407×904 the only valid viewport size to simulate my device's exact proportions, or are there alternative viewport/DPR combinations that would produce the same results?
2. Why does changing the DPR in DevTools appear to have no effect on the rendered proportions?

Any insights would be greatly appreciated! Thank you.

• css
• google-chrome
• simulation
• viewport
• devtools

1 Answer 1

You correctly calculated dimensions 407×904 — this is viewport for reproducing screen dimensions in DevTools.

But! DPR in DevTools does not change rendering scale, but affects quality of loading resources, css, js.

For example, when increasing DPR, browser will start requesting a higher image resolution (@2x, @3x).
Or it will changed styles, as in example:

@media (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    background-color: blue;
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  body {
    background-color: yellow;
  }
}

Rendering in DevTools will not change, because browser works with physical pixels of current monitor.