CSS Media Queries_javascript 기술을 기반으로 브라우징 장치를 결정하는 JavaScript 방법

CSS 부분

먼저 판단을 위한 새 클래스를 만든 다음 미디어 쿼리를 사용하여 이 클래스의 z-index 속성에 다른 값을 할당합니다. 이 클래스는 JavaScript 읽기에만 사용되므로 예기치 않은 상황을 피하기 위해 화면 창 밖으로 이동하고 브라우저에 보이지 않도록 해야 합니다.

데모로서 다음 코드는 데스크톱 일반 버전, 작은 화면 데스크톱 버전, 태블릿 버전, 모바일 버전의 네 가지 기기 상태를 설정합니다.

/* default state */
.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;

  z-index: 1;
}

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

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

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

자바스크립트 판단

CSS가 이미 마련되어 있으므로 JavaScript를 사용하여 임시 DOM 개체를 생성한 다음 해당 클래스를 설정하고 이 개체의 z-index 값을 읽어야 합니다. 원래 작성 방법은 다음과 같습니다.

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

// Create a method which returns device state
function getDeviceState() {
  return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}
getDeviceState() 函数返回的就是 z-index 的值，为了增强一下可读性，可以用 switch 函数来规范输出一下：

function getDeviceState() {
  switch(parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)) {
    case 2:
      return 'small-desktop';
      break;
    case 3:
      return 'tablet';
      break;
    case 4:
      return 'phone';
      break;
    default:
      return 'desktop';
      break;
  }
}

이런 방식으로 다음 코드를 사용하여 기기 상태를 확인한 후 해당 JavaScript 코드를 실행할 수 있습니다.

if(getDeviceState() == 'tablet') {
  // 平板电脑下执行的 JavaScript 代码
}

여기에서 jQuery를 사용하는 경우 다음 코드를 사용하세요.

$(function(){
  $('body').append('<div class="state-indicator"></div>');

  function getDeviceState() {
    switch(parseInt($('.state-indicator').css('z-index'),10)) {
      case 2:
        return 'small-desktop';
        break;
      case 3:
        return 'tablet';
        break;
      case 4:
        return 'phone';
        break;
      default:
        return 'desktop';
        break;
    }
  }

  console.log(getDeviceState());
  $('.state-indicator').remove();
});

먼저 노드를 생성한 다음, 마지막으로 삭제하면 특정 장치가 콘솔에 출력됩니다. 데모를 보려면 여기를 클릭하세요.