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 install --save js.device.selector
Example
jQuery plugin
Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.
Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.
Initialise the jQuery Plugin and sample usage.
jQuery Plugin Custom
Use your own flavored Markup and pass your own settings to the Device Selector.
ES6 class
Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.
Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.
Import the ES6 Class and sample usage.
;const deviceSelector = ; console; // return m || t || md || lgdocumentinnerHTML = deviceSelector;documentinnerHTML = deviceSelector;</script>
ES6 Class Custom
;const 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; // return m || t || md || lgdocumentinnerHTML = deviceSelector;documentinnerHTML = deviceSelector;