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
      98    
    95 97    
    94 96 TP (3,*)  
11 (1) 95 93 95 15 (3,*) 80
10 (1) 94 92 94 14.1 (3,*) 79
9 (1) 93 91 93 14 (3,*) 78
8 92 90 92 13.1 (3,*) 77
Show all
7 91 89 91 13 (3,*) 76
6 90 88 90 12.1 (3,*) 75
5.5 89 87 89 12 (3,*) 74
  88 86 88 11.1 (3,*) 73
  87 85 87 11 (3,*) 72
  86 84 86 10.1 (3,*) 71
  85 83 85 10 (3,*) 70
  84 82 84 9.1 (3,*) 69
  83 81 83 9 (3,*) 68
  81 80 81 8 (3,*) 67
  80 79 80 7.1 (3,*) 66
  79 78 79 7 (3,*) 65
  18 77 78 6.1 (3,*) 64
  17 76 77 6 (3,*) 63
  16 75 76 5.1 (3,*) 62
  15 74 75 5 (3,*) 60
  14 73 74 4 (3,*) 58
  13 72 73 3.2 57
  12 71 72 3.1 56
    70 71   55
    69 70   54
    68 69   53
    67 68   52
    66 67   51
    65 66   50
    64 65   49
    63 64   48
    62 63   47
    61 62   46
    60 61   45
    59 60   44
    58 59   43
    57 58   42
    56 57   41
    55 56   40
    54 55   39
    53 54   38
    52 53   37
    51 52   36
    50 51   35
    49 50   34
    48 49   33
    47 48   32
    46 47   31
    45 46   30
    44 45   29
    43 44   28
    42 43   27
    41 42   26
    40 41   25
    39 40   24
    38 39   23
    37 38   22
    36 37   21
    35 36   20
    34 35   19
    33 34   18
    32 33   17
    31 32   16
    30 31   15
    29 30   12.1
    28 29   12 (3,*)
    27 28 (3,*)   11.6 (3,*)
    26 27 (3,*)   11.5 (3,*)
    25 26 (3,*)   11.1 (3,*)
    24 25 (3,*)   11 (3,*)
    23 24 (3,*)   10.6 (3,*)
    22 23 (3,*)   10.5 (3,*)
    21 22 (3,*)   10.0-10.1 (3,*)
    20 21 (3,*)   9.5-9.6 (3,*)
    19 20 (3,*)   9
    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 (3,*) all (1) 94 10 (3,*) 64 94 92 11 (1) 12.12 15.0 10.4 7.12 2.5
14.5-14.8 (3,*)   4.4.3-4.4.4 7 (3,*) 12.1     10 (1)   14.0      
14.0-14.4 (3,*)   4.4   12 (3,*)         13.0      
13.4-13.7 (3,*)   4.2-4.3 (3,*)   11.5 (3,*)         12.0      
Show all
13.3 (3,*)   4.1 (3,*)   11.1 (3,*)         11.1-11.2      
13.2 (3,*)   4 (3,*)   11 (3,*)         10.1      
13.0-13.1 (3,*)   3 (3,*)   10 (3,*)         9.2      
12.2-12.5 (3,*)   2.3 (3,*)             8.2      
12.0-12.1 (3,*)   2.2             7.2-7.4      
11.3-11.4 (3,*)   2.1             6.2-6.4      
11.0-11.2 (3,*)                 5.0-5.4      
10.3 (3,*)                 4      
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

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-media-resolution