Noisy Pterodactyl Melodies

    @karolisram/consistent-vh-units

    1.0.2 • Public • Published

    @karolisram/consistent-vh-units

    Mobile browsers suffer from inconsistent calculation of vh units. This package partly alleviates the problem. The idea is based on the article [https://css-tricks.com/the-trick-to-viewport-units-on-mobile/](The trick to viewport units on mobile).

    Install

    npm

    $ npm install @karolisram/consistent-vh-units
    

    yarn

    $ yarn add @karolisram/consistent-vh-units
    

    Usage

    ES6 modules

    import '@karolisram/consistent-vh-units';

    CommonJS

    require('@karolisram/consistent-vh-units');

    Once you have the module imported, you can use custom --vh variable to assign an element's height. If CSS variables and calc are suppoted by the browser, the --vh unit will be used to calculate an element's height. In case of a fallback scenario, regular vh units will get used.

    CSS3

    .element {
      height: 100vh; /* Fallback for browsers that do not support CSS variables */
      height: calc(var(--vh, 1vh) * 100);
    }

    Install

    npm i @karolisram/consistent-vh-units

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    94.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • karolisram