CSS pixels (also called logical pixels or device-independent pixels) are the unit used by web browsers and most operating system UI frameworks. One CSS pixel corresponds to a specific angle of visual arc, approximately 1/96th of an inch at arm's length. On a standard 96 DPI monitor, one CSS pixel equals one physical pixel. On HiDPI displays like Retina Macs and high-resolution Windows laptops, the operating system uses display scaling — for example, a 2× scale means one CSS pixel is rendered using 2×2 physical pixels, resulting in sharper text and images. Physical pixels are the actual dots on the panel. A 2560×1600 Retina display may report 1280×800 in CSS pixels with a devicePixelRatio of 2.

The devicePixelRatio (DPR) is a browser property that reports the ratio of physical pixels to CSS pixels for your display. A DPR of 1.0 means CSS pixels and physical pixels are 1:1. A DPR of 2.0 means every CSS pixel uses a 2×2 block of physical pixels — text, images, and canvas elements are rendered at higher quality. DPR values of 1.25, 1.5, and 1.75 are common on Windows with scaling settings of 125%, 150%, and 175%. For web developers, DPR affects how images should be served — a DPR of 2 device should receive 2× resolution images for crisp rendering. For canvas elements, you must multiply the canvas's pixel dimensions by the DPR for sharp rendering on HiDPI displays.

It depends on what you mean by "4K." A laptop with a 4K (3840×2160) panel physically has that many pixels on the screen. However, Windows and macOS typically scale the interface to 200–250% on a 4K laptop screen, which means the UI reports a lower logical resolution — often 1920×1080 at 200% scaling. Content like text and vector graphics benefit from the full 4K physical resolution (they appear sharper), but the user interface is the same effective size as a 1080p panel. Raster images displayed at CSS pixel sizes are not necessarily rendered at 4K unless they are served as 2× or 4× image assets. You can see your actual DPR value in our screen resolution checker.

Screen size and resolution should be matched to maintain comfortable pixel density (PPI — pixels per inch). For a 27-inch monitor: 2560×1440 (QHD) is the sweet spot, offering ~109 PPI, which is sharp without needing scaling. 1920×1080 on a 27-inch screen is noticeably lower pixel density (~82 PPI) and may appear slightly soft. 3840×2160 (4K) on 27 inches provides ~163 PPI — excellent sharpness but requires scaling for comfortable UI size. For a 24-inch monitor: 1920×1080 provides ~92 PPI, which is comfortable. QHD at 24 inches (~122 PPI) provides extra sharpness. For 32-inch+ monitors: QHD (~91 PPI) or 4K (~137 PPI) is recommended. For laptops (13–15 inch): 1080p to 2K range is common; Retina/4K requires scaling.

On Windows 11: Right-click the desktop → Display settings → Scroll to "Display resolution" → Select from the dropdown. Your native resolution is marked "(Recommended)." To adjust DPI scaling: same menu, look for "Scale" — Windows recommends a percentage based on your monitor. On macOS: Apple menu → System Settings (or System Preferences) → Displays → Resolution. Click "More Space" for higher resolution or "Larger Text" for lower effective resolution. On macOS, these are labeled as "Looks like XXXX×XXXX" to describe the effective CSS pixel area. Changing to non-native resolution may cause blurry text on flat-panel displays; always prefer native resolution with appropriate scaling.

Screen resolution (window.screen.width and window.screen.height) reports the full CSS pixel dimensions of your display. Available resolution (window.screen.availWidth and window.screen.availHeight) reports the area of the screen that is usable for applications — this excludes reserved areas like the Windows taskbar, macOS menu bar, and macOS dock. For example, on a 1920×1080 display with a Windows taskbar at the bottom, the available height might be 1040 pixels instead of 1080. The "window inner size" (window.innerWidth and window.innerHeight) reports the current viewport — the size of the browser window's content area, not including browser chrome (tabs, address bar, toolbars). These values update when you resize the browser window.