sizeme

Library to measure browser size. Edit

Usage no npm install needed!

<script type="module">
  import sizeme from 'https://cdn.skypack.dev/sizeme';
</script>

README

sizeme

Library to measure browser size based on CSS or JS configuration.

  1. Install
npm install sizeme
  1. Usage
var sizeme = require('sizeme');

// You can set sizes in JS:
sizeme.load({
    sizes: [
    {
      type: 'mobile',
      maxWidth: 767
    },
    {
      type: 'tablet',
      maxWidth: 1024
    },
    {
      type: 'small_desktop',
      maxWidth: 1200
    }
  ]
});

// OR in CSS (CSS is checked first so it overwrites JS)
<style>
    body:before {
        content: "mobile";
        display: none; /* Prevent from displaying. */
    }

    @media (min-width: 700px) {
        body:before {
            content: "tablet";
        }
    }

    @media (min-width: 1100px) {
        body:before {
            content: "desktop";
        }
    }

    @media (min-width: 1400px) {
        body:before {
            content: "big_desktop";
        }
    }
</style>

sizeme.getDeviceType();
sizeme.isMobile();
sizeme.isDesktop();
  1. Run tests
npm start // or node server.js
npm test
  1. List of methods
  • load: sets configuration settings
  • getDeviceType: returns the name of current device
  • isMobile: returns true if the document size matches mobile width
  • isTablet: returns true if the document size matches tablet width
  • isSmallDesktop: returns true if the document size matches small desktop width
  • isDesktop: returns true if the document size matches desktop width
  • isResponsive: returns true if the document size matches mobile or tablet width