Viewport units: vw, vh, vmin, vmax

Length units representing a percentage of the current viewport dimensions: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Spec https://www.w3.org/TR/css3-values/#viewport-relative-lengths
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
      98    
    95 97    
    94 96 TP  
11 (2) 95 93 95 15 80
10 (2) 94 92 94 14.1 79
9 (1) 93 91 93 14 78
8 92 90 92 13.1 77
Show all
7 91 89 91 13 76
6 90 88 90 12.1 75
5.5 89 87 89 12 74
  88 86 88 11.1 73
  87 85 87 11 72
  86 84 86 10.1 71
  85 83 85 10 70
  84 82 84 9.1 69
  83 81 83 9 68
  81 80 81 8 67
  80 79 80 7.1 66
  79 78 79 7 65
  18 77 78 6.1 64
  17 76 77 6 (2) 63
  16 75 76 5.1 62
  15 (2) 74 75 5 60
  14 (2) 73 74 4 58
  13 (2) 72 73 3.2 57
  12 (2) 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
    27 28   11.6
    26 27   11.5
    25 26   11.1
    24 25 (2)   11
    23 24 (2)   10.6
    22 23 (2)   10.5
    21 22 (2)   10.0-10.1
    20 21 (2)   9.5-9.6
    19 20 (2)   9
    18 19    
    17 18    
    16 17    
    15 16    
    14 15    
    13 14    
    12 13    
    11 12    
    10 11    
    9 10    
    8 9    
    7 8    
    6 7    
    5 6    
    4 5    
    3.6 4    
    3.5      
    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 all 94 10 64 94 92 11 (2) 12.12 15.0 10.4 7.12 2.5
14.5-14.8   4.4.3-4.4.4 7 12.1     10 (2)   14.0      
14.0-14.4   4.4   12         13.0      
13.4-13.7   4.2-4.3   11.5         12.0      
Show all
13.3   4.1   11.1         11.1-11.2      
13.2   4   11         10.1      
13.0-13.1   3   10         9.2      
12.2-12.5   2.3             8.2      
12.0-12.1   2.2             7.2-7.4      
11.3-11.4   2.1             6.2-6.4      
11.0-11.2                 5.0-5.4      
10.3                 4      
10.0-10.2                        
9.3                        
9.0-9.2                        
8.1-8.4                        
8                        
7.0-7.1 (3)                        
6.0-6.1 (2,3)                        
5.0-5.1                        
4.2-4.3                        
4.0-4.1                        
3.2                        

Notes

  1. Partial support in IE9 refers to supporting "vm" instead of "vmin".

  2. Partial support refers to not supporting the "vmax" unit.

  3. Partial support in iOS7 is due to buggy behavior of the "vh" unit (see workarounds: 1, 2).

Bugs

  • In Firefox there is a documented bug where 100vh has no effect on any element with its display property set to table.

  • Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34.

  • Safari & iOS Safari (both 6 and 7) does not support viewport units for border widths, column gaps, transform values, box shadows or in calc().

  • iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.

  • Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages

  • iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.

  • In IE 10 and 11, using vw units with 3D transforms causes unexpected behavior

  • Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set.

  • IE9 does not calculate viewport units correctly when the browser or OS is zoomed.

  • In IE9 inside an iframe, viewport units will be calculated in the context of the parent window and not the iframe.

  • On iOS Safari and Chrome for Android, 100vw 100vh are sized to the 'largest possible viewport' where they may be larger than <html> 100% being the 'smallest possible viewport', all during the user's scrolling. On Safari for iPad with the sidebar on, the 'largest possible viewport' may be when the content is scrolled until it fills all the area beneath the blurred sidebar.

  • IE and Edge truncate all units to 2 decimals places. Lengths coming from fractions may not be rendered with the expected value.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/viewport-units