W3cubDocs

/Support Tables

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
      73    
    65 72    
    64 71 TP (3,*)  
11 (1) 18 63 70 12 (3,*) 56
10 (1) 17 62 69 11.1 (3,*) 55
9 (1) 16 61 68 11 (3,*) 54
8 15 60 67 10.1 (3,*) 53
Show all
7 14 59 66 10 (3,*) 52
6 13 58 65 9.1 (3,*) 51
5.5 12 57 64 9 (3,*) 50
    56 63 8 (3,*) 49
    55 62 7.1 (3,*) 48
    54 61 7 (3,*) 47
    53 60 6.1 (3,*) 46
    52 59 6 (3,*) 45
    51 58 5.1 (3,*) 44
    50 57 5 (3,*) 43
    49 56 4 (3,*) 42
    48 55 3.2 41
    47 54 3.1 40
    46 53   39
    45 52   38
    44 51   37
    43 50   36
    42 49   35
    41 48   34
    40 47   33
    39 46   32
    38 45   31
    37 44   30
    36 43   29
    35 42   28
    34 41   27
    33 40   26
    32 39   25
    31 38   24
    30 37   23
    29 36   22
    28 35   21
    27 34   20
    26 33   19
    25 32   18
    24 31   17
    23 30   16
    22 29   15
    21 28 (3,*)   12.1
    20 27 (3,*)   12 (3,*)
    19 26 (3,*)   11.6 (3,*)
    18 25 (3,*)   11.5 (3,*)
    17 24 (3,*)   11.1 (3,*)
    16 23 (3,*)   11 (3,*)
    15 (2) 22 (3,*)   10.6 (3,*)
    14 (2) 21 (3,*)   10.5 (3,*)
    13 (2) 20 (3,*)   10.0-10.1 (3,*)
    12 (2) 19 (3,*)   9.5-9.6 (3,*)
    11 (2) 18 (3,*)   9
    10 (2) 17 (3,*)    
    9 (2) 16 (3,*)    
    8 (2) 15 (3,*)    
    7 (2) 14 (3,*)    
    6 (2) 13 (3,*)    
    5 (2) 12 (3,*)    
    4 (2) 11 (3,*)    
    3.6 (2) 10 (3,*)    
    3.5 (2) 9 (3,*)    
    3 8 (3,*)    
    2 7 (3,*)    
      6 (3,*)    
      5 (3,*)    
      4 (3,*)    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 (3,*) all (1) 67 10 (3,*) 46 70 63 11 (1) 11.8 7.2 1.2 7.12
11.3-11.4 (3,*)   4.4.3-4.4.4 7 (3,*) 12.1     10 (1)   6.2    
11.0-11.2 (3,*)   4.4   12 (3,*)         5    
10.3 (3,*)   4.2-4.3 (3,*)   11.5 (3,*)         4    
Show all
10.0-10.2 (3,*)   4.1 (3,*)   11.1 (3,*)              
9.3 (3,*)   4 (3,*)   11 (3,*)              
9.0-9.2 (3,*)   3 (3,*)   10 (3,*)              
8.1-8.4 (3,*)   2.3 (3,*)                  
8 (3,*)   2.2                  
7.0-7.1 (3,*)   2.1                  
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.
http://caniuse.com/#feat=css-media-resolution