Unit Rulebook

Type a unit, or a word from its description.

    svw

    The small viewport's width in hundredths: the window with browser toolbars shown.

    Safe to useBaseline: widely available

    First version with support, from MDN browser data
    BrowserSince
    Chrome108+
    Chrome Android108+
    Edge108+
    Firefox101+
    Firefox Android101+
    Safari15.4+
    Safari iOS15.4+

    Formula 1svw = 1/100 of the width when browser toolbars are fully shown

    How it works

    1svw is one percent of the small viewport width: the window with every retractable browser toolbar shown. In a desktop window nothing retracts, so svw equals vw and 10svw is 128px in a window 1280px wide either way. Whether the two could differ on a device is up to what that device’s retractable interface takes away, and this site has not watched one.

    The reason to write it is symmetry. A block of 80svw by 80svh has both sides on one footing, where 80vw by 80svh leaves one side on the default definition and the other on the small one. A browser that predates the unit drops the declaration, so put a vw line before the svw one. The earlier line then stays in force, which the tests confirm with a made-up unit standing in for the unknown one.

    Try it

    Viewport units for a window of your choice

    Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.

    10vw
    128px
    10vh
    80px
    10vmin
    80px
    10vmax
    128px

    On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.

    The same as a table
    Ten of each viewport unit in two windows
    UnitLaptop, 1280 by 800Phone, 390 by 844
    10vw128px39px
    10vh80px84.4px
    10vmin80px39px
    10vmax128px84.4px

    What changes it

    Moves with
    • the window size
    Stays put under
    • the reader's text size
    • page zoom
    • the font in use
    • the query container
    • phone toolbars
    • the writing mode

    Reach for it when

    The width half of a box sized from the small viewport on both axes, next to svh.

    Watch out

    Browsers that do not know the unit drop the declaration. Put a vw line before the svw one.

    Example Older browsers keep the vw line.
    .banner {
  inline-size: 50vw;
  inline-size: 50svw;
}
    • svhA hundredth of the visible height with browser toolbars fully shown.
    • lvwThe large viewport's width in hundredths: the window with browser toolbars retracted.
    • sviOne percent of the small viewport, measured the way a line of text runs.

    MDNSpecification