hover & size detect

hoversizedetect.js looks for a device's information provided in window.matchMedia. Currently it looks for

1. the device's hover ability, and
2. if a precise pointer device like a mouse or trackpad is available.

It's written in vanilla javascript and comes without any further dependencies.

Installation

npm install hoversizedetect

Setup

import HoverSizeDetect from 'hoversizedetect';

const myHoverSizeDetectInstance = new HoverSizeDetect({
  breakpoint: 992, // in px
  debug: true, // shows info in console (e.g. for development purposes)
});

myHoverSizeDetectInstance.init(); // initialize

Options

| Option | Type | Default | Description | |:---|:---|:---|:---| | breakpoint | Number | 992 | Matches against min-width rule (in px).Example:if config value is set to 768, info will return is >= 768px. | debug | Boolean | false | if true, collected info is shown in console |

.matchmedia() queries

| Query | Result | |:---|:---| | (pointer: coarse) | touchMobile | | (pointer: fine), (pointer: none) and (any-hover: hover) | desktop | | (pointer: fine) and (any-pointer: coarse) | touchDesktop* |

* e.g. a touch screen laptop with hover ability, but no pointer device connected.

Body classes

Body classes are set depending on screen size and hover ability. Use them for your needs. Be creative! 🙂

| breakpoint | hover mode | screen mode | body classes | |:---|:---|:---|:---| | >= options.breakpoint | has hover | 1 | .is-above-eq-{options.breakpoint}, .has-hover | | < options.breakpoint | no hover | 2 | .is-below-{options.breakpoint}, .no-hover | | >= options.breakpoint | no hover | 3 | .is-above-eq-{options.breakpoint}, .no-hover | | < options.breakpoint | has hover | 4 | .is-below-{options.breakpoint}, .has-hover |

Collected data

Collected data can be accessed via myHoverSizeDetectInstance.getInfo(); while .getInfo() returns data as object.

const collectedInfo = myHoverSizeDetectInstance.getInfo(); 

Example

A device e.g. in 1920x1080px with mouse device connected returns the following data:

// content of collectedInfo:
{
  query: "(pointer: fine), (pointer: none) and (any-hover: hover)",
  type: "desktop",
  size: {
    width: 1920,
    height: 1080
  },
  info: "is >= 992, has hover",
  mode: 1
}

Demo

See https://larsactionhero.com/hoversizedetect/example for demo an example (open console to see data).