Skip to content
ES6 class and jQuery Plugin to get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist
docs
example
src
tests
.babelrc
.codeclimate.yml
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Gruntfile.js
LICENSE
README.md
package-lock.json
package.json

README.md

tests coverage maintainability

js.device.selector

ES6 class and jQuery Plugin which get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.

This solution make it possible to define your breakpoints only once (in CSS) and pass them automatically into JavaScript.

npm

npm

npm install --save js.device.selector

Example

jQuery plugin

Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.

<style>

  [data-device-selector-item] {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-device-selector-devicetype="mobile"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-device-selector-devicetype="tablet"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-device-selector-devicetype="desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-device-selector-devicetype="large-desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-device-selector-displaytype="retina"] {
      display: block !important;
    }
  }
</style>

Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.

<div data-device-selector>
  <div data-device-selector-item data-device-selector-devicetype="mobile"></div>
  <div data-device-selector-item data-device-selector-devicetype="tablet"></div>
  <div data-device-selector-item data-device-selector-devicetype="desktop"></div>
  <div data-device-selector-item data-device-selector-devicetype="large-desktop"></div>
  <div data-device-selector-item data-device-selector-displaytype="retina"></div>
</div>

Initialise the jQuery Plugin and sample usage.

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/js.device.selector/jquery.device.selector.min.js"></script>
<script>
  $.fn.deviceSelector();
  console.log($.fn.deviceSelector.getDeviceType()); // return mobile || tablet || desktop || large-desktop
  $('#deviceType').text($.fn.deviceSelector.getDeviceType());
  $('#displayType').text($.fn.deviceSelector.getDisplayType());
</script>

jQuery Plugin Custom

Use your own flavored Markup and pass your own settings to the Device Selector.

<style>

  .namespace__m-device-selector__item {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-ds-devicetype="m"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-ds-devicetype="t"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-ds-devicetype="md"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-ds-devicetype="ld"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-ds-displaytype="rt"] {
      display: block !important;
    }
  }
</style>
<div class="namespace">
  <div class="namespace__m-device-selector">
    <div class="namespace__m-device-selector__item" data-ds-devicetype="m"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="t"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="md"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="lg"></div>
    <div class="namespace__m-device-selector__item" data-ds-displaytype="rt"></div>
  </div>
</div>
<script>
  $.fn.deviceSelector({
    'selector': {
      'name': '.namespace__m-device-selector',
      'parent': {
        'name': 'body',
      },
      'items': {
        'name': '.namespace__m-device-selector__item',
      },
    },
    'device': {
      'selector': {
        'name': 'data-ds-devicetype',
      },
    },
    'display': {
      'selector': {
        'name': 'data-ds-displaytype',
      },
    },
  });
  console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
  $('#deviceType').text($.fn.deviceSelector.getDeviceType());
  $('#displayType').text($.fn.deviceSelector.getDisplayType());
</script>

ES6 class

Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.

<style>

  [data-device-selector-item] {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-device-selector-devicetype="mobile"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-device-selector-devicetype="tablet"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-device-selector-devicetype="desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-device-selector-devicetype="large-desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-device-selector-displaytype="retina"] {
      display: block !important;
    }
  }
</style>

Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.

<div data-device-selector>
  <div data-device-selector-item data-device-selector-devicetype="mobile"></div>
  <div data-device-selector-item data-device-selector-devicetype="tablet"></div>
  <div data-device-selector-item data-device-selector-devicetype="desktop"></div>
  <div data-device-selector-item data-device-selector-devicetype="large-desktop"></div>
  <div data-device-selector-item data-device-selector-displaytype="retina"></div>
</div>

Import the ES6 Class and sample usage.

import DeviceSelector from './js/device.selector.class';
const deviceSelector = new DeviceSelector();

console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
document.querySelector('#deviceType').innerHTML = deviceSelector.deviceType();
document.querySelector('#displayType').innerHTML = deviceSelector.displayType();
</script>

ES6 Class Custom

<style>

  .namespace__m-device-selector__item {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-ds-devicetype="m"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-ds-devicetype="t"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-ds-devicetype="md"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-ds-devicetype="ld"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-ds-displaytype="rt"] {
      display: block !important;
    }
  }
</style>
<div class="namespace">
  <div class="namespace__m-device-selector">
    <div class="namespace__m-device-selector__item" data-ds-devicetype="m"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="t"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="md"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="lg"></div>
    <div class="namespace__m-device-selector__item" data-ds-displaytype="rt"></div>
  </div>
</div>
import DeviceSelector from './js/device.selector.class';
const deviceSelector = new DeviceSelector({
  'selector': {
    'name': '.namespace__m-device-selector',
    'parent': {
      'name': 'body',
    },
    'items': {
      'name': '.namespace__m-device-selector__item',
    },
  },
  'device': {
    'selector': {
      'name': 'data-ds-devicetype',
    },
  },
  'display': {
    'selector': {
      'name': 'data-ds-displaytype',
    },
  },
});

console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
document.querySelector('#deviceType').innerHTML = deviceSelector.deviceType();
document.querySelector('#displayType').innerHTML = deviceSelector.displayType();

Documentation

You can’t perform that action at this time.