Viewport units: vw, vh, vmin, vmax

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 http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
    57 62    
    56 61 TP 48
  16 (2) 55 60 11 47
11 (2) 15 (2) 54 59 10.1 46
10 (2) 14 (2) 53 58 10 45
9 (1) 13 (2) 52 57 9.1 44
8 12 (2) 51 56 9 43
Show all
7   50 55 8 42
6   49 54 7.1 41
5.5   48 53 7 40
    47 52 6.1 39
    46 51 6 (2) 38
    45 50 5.1 37
    44 49 5 36
    43 48 4 35
    42 47 3.2 34
    41 46 3.1 33
    40 45   32
    39 44   31
    38 43   30
    37 42   29
    36 41   28
    35 40   27
    34 39   26
    33 38   25
    32 37   24
    31 36   23
    30 35   22
    29 34   21
    28 33   20
    27 32   19
    26 31   18
    25 30   17
    24 29   16
    23 28   15
    22 27   12.1
    21 26   12
    20 25 (2)   11.6
    19 24 (2)   11.5
    18 23 (2)   11.1
    17 22 (2)   11
    16 21 (2)   10.6
    15 20 (2)   10.5
    14 19   10.0-10.1
    13 18   9.5-9.6
    12 17   9
    11 16    
    10 15    
    9 14    
    8 13    
    7 12    
    6 11    
    5 10    
    4 9    
    3.6 8    
    3.5 7    
    3 6    
    2 5    
      4    
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
11                      
10.3 all 56 10 37 59 54 11 (2) 11.4 5 1.2 7.12
10.0-10.2   4.4.3-4.4.4 7 12.1     10 (2)   4    
9.3   4.4   12              
9.0-9.2   4.2-4.3   11.5              
Show all
8.1-8.4   4.1   11.1              
8   4   11              
7.0-7.1 (3)   3   10              
6.0-6.1 (2,3)   2.3                  
5.0-5.1   2.2                  
4.2-4.3   2.1                  
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 it's 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.

  • Chrome does not print elements defined with viewport units.

  • vh on iOS is reported to include the height of the bottom toolbar in the height calculation, and the width of the sidebar (bookmarks) in the vw width calculation.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=viewport-units

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部