Device Selector

Usage

CSS

  
<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

  
<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>
  

JavaScript

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

// mobile || tablet || desktop || large-desktop
console.log(deviceSelector.deviceType());
// retina || undefined
console.log(deviceSelector.displayType());
  

  
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/js.device.selector/dist/jquery.device.selector.js"></script>
<script>
  $.fn.deviceSelector();
  // mobile || tablet || desktop || large-desktop
  console.log($.fn.deviceSelector.getDeviceType());
  // retina || undefined
  console.log($.fn.deviceSelector.getDisplayType());
</script>
  

Custom Usage

CSS

<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="sm"] {
    display: block !important;
  }
}
@media
only screen and (min-width: 1201px) {
  [data-ds-devicetype="lg"] {
    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="retina"] {
    display: block !important;
  }
}
</style>

Markup

<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="sm"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="lg"></div>
    <div class="namespace__m-device-selector__item" data-ds-displaytype="retina"></div>
  </div>
</div>

JavaScript

// app
import DeviceSelector from 'js.device.selector';
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',
    },
  },
});

// m || t || sm || lg
console.log(deviceSelector.deviceType());
// retina || undefined
console.log(deviceSelector.displayType());

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/js.device.selector/dist/jquery.device.selector.js"></script>
<script>
$.fn.deviceSelector({
  "selector": {
    "name": ".namespace__m-device-selector",
    "parent": {
      "name": ".namespace",
    },
    "items": {
      "name": ".namespace__m-device-selector__item",
    },
  },
  "device": {
    "selector": {
      "name": "data-ds-devicetype",
    },
  },
  "display": {
    "selector": {
      "name": "data-ds-displaytype",
    },
  },
});
// mobile || tablet || desktop || large-desktop
console.log($.fn.deviceSelector.getDeviceType());
// retina || undefined
console.log($.fn.deviceSelector.getDisplayType());
</script>