Media Queries: resolution feature

Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min/max-resolution for this, some browsers support the older non-standard device-pixel-ratio media query.

Spec	https://www.w3.org/TR/css3-mediaqueries/#resolution
Status	W3C Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			103
		100	102
		99	101	TP
11 (1)	99	98	100	15.4 (3,*)	83
10 (1)	98	97	99	15.2-15.3 (3,*)	82
9 (1)	97	96	98	15.1 (3,*)	81
8	96	95	97	15 (3,*)	80
Show all
7	95	94	96	14.1 (3,*)	79
6	94	93	95	14 (3,*)	78
5.5	93	92	94	13.1 (3,*)	77
	92	91	93	13 (3,*)	76
	91	90	92	12.1 (3,*)	75
	90	89	91	12 (3,*)	74
	89	88	90	11.1 (3,*)	73
	88	87	89	11 (3,*)	72
	87	86	88	10.1 (3,*)	71
	86	85	87	10 (3,*)	70
	85	84	86	9.1 (3,*)	69
	84	83	85	9 (3,*)	68
	83	82	84	8 (3,*)	67
	81	81	83	7.1 (3,*)	66
	80	80	81	7 (3,*)	65
	79	79	80	6.1 (3,*)	64
	18	78	79	6 (3,*)	63
	17	77	78	5.1 (3,*)	62
	16	76	77	5 (3,*)	60
	15	75	76	4 (3,*)	58
	14	74	75	3.2	57
	13	73	74	3.1	56
	12	72	73		55
		71	72		54
		70	71		53
		69	70		52
		68	69		51
		67	68		50
		66	67		49
		65	66		48
		64	65		47
		63	64		46
		62	63		45
		61	62		44
		60	61		43
		59	60		42
		58	59		41
		57	58		40
		56	57		39
		55	56		38
		54	55		37
		53	54		36
		52	53		35
		51	52		34
		50	51		33
		49	50		32
		48	49		31
		47	48		30
		46	47		29
		45	46		28
		44	45		27
		43	44		26
		42	43		25
		41	42		24
		40	41		23
		39	40		22
		38	39		21
		37	38		20
		36	37		19
		35	36		18
		34	35		17
		33	34		16
		32	33		15
		31	32		12.1
		30	31		12 (3,*)
		29	30		11.6 (3,*)
		28	29		11.5 (3,*)
		27	28 (3,*)		11.1 (3,*)
		26	27 (3,*)		11 (3,*)
		25	26 (3,*)		10.6 (3,*)
		24	25 (3,*)		10.5 (3,*)
		23	24 (3,*)		10.0-10.1 (3,*)
		22	23 (3,*)		9.5-9.6 (3,*)
		21	22 (3,*)		9
		20	21 (3,*)
		19	20 (3,*)
		18	19 (3,*)
		17	18 (3,*)
		16	17 (3,*)
		15 (2)	16 (3,*)
		14 (2)	15 (3,*)
		13 (2)	14 (3,*)
		12 (2)	13 (3,*)
		11 (2)	12 (3,*)
		10 (2)	11 (3,*)
		9 (2)	10 (3,*)
		8 (2)	9 (3,*)
		7 (2)	8 (3,*)
		6 (2)	7 (3,*)
		5 (2)	6 (3,*)
		4 (2)	5 (3,*)
		3.6 (2)	4 (3,*)
		3.5 (2)
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
15.4 (3,*)	all (1)	99	10 (3,*)	64	100	98	11 (1)	12.12	16.0	10.4	7.12	2.5
15.2-15.3 (3,*)		4.4.3-4.4.4	7 (3,*)	12.1			10 (1)		15.0
15.0-15.1 (3,*)		4.4		12 (3,*)					14.0
14.5-14.8 (3,*)		4.2-4.3 (3,*)		11.5 (3,*)					13.0
Show all
14.0-14.4 (3,*)		4.1 (3,*)		11.1 (3,*)					12.0
13.4-13.7 (3,*)		4 (3,*)		11 (3,*)					11.1-11.2
13.3 (3,*)		3 (3,*)		10 (3,*)					10.1
13.2 (3,*)		2.3 (3,*)							9.2
13.0-13.1 (3,*)		2.2							8.2
12.2-12.5 (3,*)		2.1							7.2-7.4
12.0-12.1 (3,*)									6.2-6.4
11.3-11.4 (3,*)									5.0-5.4
11.0-11.2 (3,*)									4
10.3 (3,*)
10.0-10.2 (3,*)
9.3 (3,*)
9.0-9.2 (3,*)
8.1-8.4 (3,*)
8 (3,*)
7.0-7.1 (3,*)
6.0-6.1 (3,*)
5.0-5.1 (3,*)
4.2-4.3 (3,*)
4.0-4.1 (3,*)
3.2

Notes

1. Supports the dpi unit, but does not support dppx or dpcm units.

2. Firefox before 16 supports only dpi unit, but you can set 2dppx per min--moz-device-pixel-ratio: 2

3. Supports the non-standard min/max-device-pixel-ratio

^* Partial support with prefix.

Bugs

• Microsoft Edge has a bug where min-resolution less than 1dpcm is ignored.

Resources

• How to unprefix -webkit-device-pixel-ratio
• WebKit Bug 78087: Implement the 'resolution' media query
• WHATWG Compatibility Standard: -webkit-device-pixel-ratio
• MDN Web Docs - CSS @media resolution