It's difficult for web pages to determine how they look on your display.
HTML and CSS have been designed around 96 dots (or pixels) per inch as the standard unit of measure. Using zoom or setting a different ratio of device pixels to CSS pixels (for high-density displays) can cause pages to look wrong. A CSS media query using the min-resolution and max-resolution properties can "read" the resolution of the page and allow for appearance adjustments.
CSS media queries read the resolution in dpi being below 92ppi.
CSS media queries read the resolution as being in the range of 92-100ppi.
CSS media queries read the resolution as being in the range of 101-115ppi.
CSS media queries read the resolution as being in the range of 116-124ppi.
CSS media queries read the resolution as being in the range of 125-138ppi.
CSS media queries read the resolution as being in the range of 139-149ppi.
CSS media queries read the resolution as being higher than 149ppi.
Scripts in web pages can check various properties of the screen and window objects (Firefox 18 and later).
Copyright © 2013 Jefferson Scher. Updated 11/17/2013.