hoversizedetect.js

🔗 https://larsactionhero.com/hoversizedetect/

hoversizedetect.js is a tiny vanilla js script (~1.63kB minified) that collects a device's information provided in window.matchMedia.
Useful for detecting hover ability on devices and getting their screen size.
The collected data shares at least enough information so that most cases for mobile/touch and desktop devices can targeted. Let's say it works as a mobile and touch device detection.

It watches for

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

Installation

NPM Package

🔗 https://www.npmjs.com/package/hoversizedetect

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 appears 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,
  hasHover: true
}

Demo

https://larsactionhero.com/hoversizedetect/example
ℹ️ Open browser console to see data output.