10 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Device pixel - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel | reference | web, html, css, javascript, documentation | 2026-05-05T05:29:40.714422+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Device pixel
A device pixel is the smallest physical display unit capable of displaying a full color independent of its neighbor. It is the smallest physical unit of a display (such as a monitor or mobile phone screen), also known as a hardware pixel or physical pixel. Each device pixel is an individual dot that composes the output of the display. Device pixels are fixed and do not scale based on the viewport or CSS. A device pixel is density-dependent, varying based on the display resolution. The device-pixel-ratio is the ratio of the resolution in physical device pixels to the resolution in CSS pixels for the display. It usually differs from a CSS pixel, which is an absolute length defined as being exactly 1/96th of 1 CSS inch. Devices considered Hi-DPI have more than one device pixel per CSS pixel in the same physical area, while low-DPI devices have less than a 1-to-1 ratio.
In this article
See also
- CSS
<resolution>data type - CSS
resolution@media feature - CSS
image-resolutionproperty Window.devicePixelRatioAPI