Device state detection with css media queries and javascript

README.md

Device state detection with css media queries and javascript

Better way to detect device state / type(mobile / tablet / desktop). window.innerWidth caused a reflow. So, not recommended.

source: https://davidwalsh.name/device-state-detection-css-media-queries-javascript css layout / paint / composite triggers - https://csstriggers.com/

main.js

var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);

function getDeviceState(){
  return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

if(getDeviceState() < 3){
  //If desktop or small desktop
}

function getDeviceState(){
  var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'));
  
  var states = {
    2: 'small-desktop',
    3: 'tablet',
    4: 'phone'
  };
  
  return states[index] || 'desktop';
}

style.css

.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;
  z-index: 1;
}

@media all and (max-width: 1200px){
  .state-indicator {
    z-index: 2;
  }
}

@media all and (max-width: 1024px){
  .state-indicator{
    z-index: 3;
  }
}

@media all and (max-width: 768px){
  .state-indicator{
    z-index: 4;
  }
}