Mention devicePixelRatio affected by page zoom (#38183)

* Mention devicePixelRatio affected by page zoom

* Update files/en-us/web/api/window/devicepixelratio/index.md

Co-authored-by: Hamish Willee <[email protected]>

* Clean up line breaks (unrelated to fix)

---------

Co-authored-by: Hamish Willee <[email protected]>

files/en-us/web/api/window/devicepixelratio/index.md

@@ -8,38 +8,32 @@ browser-compat: api.Window.devicePixelRatio
 
 {{APIRef}}
 
-The **`devicePixelRatio`** of
-{{domxref("Window")}} interface returns the ratio of the resolution in _physical
-pixels_ to the resolution in _CSS pixels_ for the current display
-device.
+The **`devicePixelRatio`** of {{domxref("Window")}} interface returns the ratio of the resolution in _physical pixels_ to the resolution in _CSS pixels_ for the current display device.
 
-This value could also be interpreted as the ratio of pixel sizes: the
-size of one _CSS pixel_ to the size of one _physical pixel_. In simpler
-terms, this tells the browser how many of the screen's actual pixels should be used to
-draw a single CSS pixel.
+This value could also be interpreted as the ratio of pixel sizes: the size of one _CSS pixel_ to the size of one _physical pixel_.
+In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.
 
-This is useful when dealing with the difference between rendering on a standard display
-versus a HiDPI or Retina display, which use more screen pixels to draw the same objects,
-resulting in a sharper image.
+Page zooming affects the value of `devicePixelRatio`. When a page is zoomed in (made larger), the size of a CSS pixel increases, and so the `devicePixelRatio` value increases.
+Pinch-zooming does not affect `devicePixelRatio`, because this magnifies the page without changing the size of a CSS pixel.
 
-You can use {{domxref("Window.matchMedia", "window.matchMedia()")}} to check if the
-value of `devicePixelRatio` changes (which can happen, for example, if the
-user drags the window to a display with a different pixel density). See
-[the example below](#monitoring_screen_resolution_or_zoom_level_changes).
+This is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina display, which use more screen pixels to draw the same objects, resulting in a sharper image.
+
+You can use {{domxref("Window.matchMedia", "window.matchMedia()")}} to check if the value of `devicePixelRatio` changes (which can happen, for example, if the user drags the window to a display with a different pixel density).
+See [the example below](#monitoring_screen_resolution_or_zoom_level_changes).
 
 ## Value
 
 A double-precision floating-point value indicating the ratio of the display's resolution in physical pixels to the resolution in CSS pixels. A value of 1 indicates a classic 96 DPI display, while a value of 2 is expected for HiDPI/Retina displays.
 
-Other values may be returned in the case of unusually low resolution displays or, more often, when a screen has a higher pixel density than double the standard resolution of 96 DPI. Modern mobile device screens - which offer high display resolutions at small physical sizes - often yield a `devicePixelRatio` value greater than 2.
+Other values may be returned in the case of unusually low resolution displays or, more often, when a screen has a higher pixel density than double the standard resolution of 96 DPI.
+Modern mobile device screens - which offer high display resolutions at small physical sizes - often yield a `devicePixelRatio` value greater than 2.
 
 ## Examples
 
 ### Correcting resolution in a `<canvas>`
 
 A {{htmlelement("canvas")}} can appear too blurry on retina screens.
-Use `window.devicePixelRatio` to determine how much extra pixel density
-should be added to allow for a sharper image.
+Use `window.devicePixelRatio` to determine how much extra pixel density should be added to allow for a sharper image.
 
 #### HTML