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 install --save js.device.selector
Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.
<style> [data-device-selector-item] {display: none; }@mediaonly screenand (max-width:768px) { [data-device-selector-devicetype="mobile"] {display: block!important; } }@mediaonly screenand (min-width:769px)and (max-width:960px) { [data-device-selector-devicetype="tablet"] {display: block!important; } }@mediaonly screenand (min-width:961px)and (max-width:1200px) { [data-device-selector-devicetype="desktop"] {display: block!important; } }@mediaonly screenand (min-width:1201px) { [data-device-selector-devicetype="large-desktop"] {display: block!important; } }@mediaonly screenand (-webkit-min-device-pixel-ratio:2),only screenand (min--moz-device-pixel-ratio:2),only screenand (-o-min-device-pixel-ratio:2/1),only screenand (min-device-pixel-ratio:2),only screenand (min-resolution:192dpi),only screenand (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.
<divdata-device-selector><divdata-device-selector-itemdata-device-selector-devicetype="mobile"></div><divdata-device-selector-itemdata-device-selector-devicetype="tablet"></div><divdata-device-selector-itemdata-device-selector-devicetype="desktop"></div><divdata-device-selector-itemdata-device-selector-devicetype="large-desktop"></div><divdata-device-selector-itemdata-device-selector-displaytype="retina"></div></div>
Initialise the jQuery Plugin and sample usage.
<scriptsrc="../node_modules/jquery/dist/jquery.min.js"></script><scriptsrc="../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>Use your own flavored Markup and pass your own settings to the Device Selector.
<style> .namespace__m-device-selector__item {display: none; }@mediaonly screenand (max-width:768px) { [data-ds-devicetype="m"] {display: block!important; } }@mediaonly screenand (min-width:769px)and (max-width:960px) { [data-ds-devicetype="t"] {display: block!important; } }@mediaonly screenand (min-width:961px)and (max-width:1200px) { [data-ds-devicetype="md"] {display: block!important; } }@mediaonly screenand (min-width:1201px) { [data-ds-devicetype="ld"] {display: block!important; } }@mediaonly screenand (-webkit-min-device-pixel-ratio:2),only screenand (min--moz-device-pixel-ratio:2),only screenand (-o-min-device-pixel-ratio:2/1),only screenand (min-device-pixel-ratio:2),only screenand (min-resolution:192dpi),only screenand (min-resolution:2dppx) { [data-ds-displaytype="rt"] {display: block!important; } }</style><divclass="namespace"><divclass="namespace__m-device-selector"><divclass="namespace__m-device-selector__item"data-ds-devicetype="m"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="t"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="md"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="lg"></div><divclass="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>Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.
<style> [data-device-selector-item] {display: none; }@mediaonly screenand (max-width:768px) { [data-device-selector-devicetype="mobile"] {display: block!important; } }@mediaonly screenand (min-width:769px)and (max-width:960px) { [data-device-selector-devicetype="tablet"] {display: block!important; } }@mediaonly screenand (min-width:961px)and (max-width:1200px) { [data-device-selector-devicetype="desktop"] {display: block!important; } }@mediaonly screenand (min-width:1201px) { [data-device-selector-devicetype="large-desktop"] {display: block!important; } }@mediaonly screenand (-webkit-min-device-pixel-ratio:2),only screenand (min--moz-device-pixel-ratio:2),only screenand (-o-min-device-pixel-ratio:2/1),only screenand (min-device-pixel-ratio:2),only screenand (min-resolution:192dpi),only screenand (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.
<divdata-device-selector><divdata-device-selector-itemdata-device-selector-devicetype="mobile"></div><divdata-device-selector-itemdata-device-selector-devicetype="tablet"></div><divdata-device-selector-itemdata-device-selector-devicetype="desktop"></div><divdata-device-selector-itemdata-device-selector-devicetype="large-desktop"></div><divdata-device-selector-itemdata-device-selector-displaytype="retina"></div></div>
Import the ES6 Class and sample usage.
importDeviceSelectorfrom'./js/device.selector.class';constdeviceSelector=newDeviceSelector();console.log($.fn.deviceSelector.getDeviceType());// return m || t || md || lgdocument.querySelector('#deviceType').innerHTML=deviceSelector.deviceType();document.querySelector('#displayType').innerHTML=deviceSelector.displayType();</script><style> .namespace__m-device-selector__item {display: none; }@mediaonly screenand (max-width:768px) { [data-ds-devicetype="m"] {display: block!important; } }@mediaonly screenand (min-width:769px)and (max-width:960px) { [data-ds-devicetype="t"] {display: block!important; } }@mediaonly screenand (min-width:961px)and (max-width:1200px) { [data-ds-devicetype="md"] {display: block!important; } }@mediaonly screenand (min-width:1201px) { [data-ds-devicetype="ld"] {display: block!important; } }@mediaonly screenand (-webkit-min-device-pixel-ratio:2),only screenand (min--moz-device-pixel-ratio:2),only screenand (-o-min-device-pixel-ratio:2/1),only screenand (min-device-pixel-ratio:2),only screenand (min-resolution:192dpi),only screenand (min-resolution:2dppx) { [data-ds-displaytype="rt"] {display: block!important; } }</style><divclass="namespace"><divclass="namespace__m-device-selector"><divclass="namespace__m-device-selector__item"data-ds-devicetype="m"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="t"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="md"></div><divclass="namespace__m-device-selector__item"data-ds-devicetype="lg"></div><divclass="namespace__m-device-selector__item"data-ds-displaytype="rt"></div></div></div>importDeviceSelectorfrom'./js/device.selector.class';constdeviceSelector=newDeviceSelector({'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 || lgdocument.querySelector('#deviceType').innerHTML=deviceSelector.deviceType();document.querySelector('#displayType').innerHTML=deviceSelector.displayType();
