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.
<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();