CSS 섹션
먼저, 심판을위한 새 클래스를 작성한 다음 미디어 쿼리를 사용 하여이 클래스의 z-index 속성에 다른 값을 할당하십시오. 이 클래스는 JavaScript 읽기로만 사용되므로 예상치 못한 상황을 피하기 위해 뷰어가 보이지 않도록 화면 창 밖으로 이동해야합니다.
시연으로서 다음 코드는 데스크탑 일반 버전, 작은 화면 데스크톱 버전, 태블릿 버전 및 모바일 버전의 네 가지 장치 상태를 설정합니다.
/ * 기본 상태 */. State-Indicator {위치 : 절대; 상단 : -999EM; 왼쪽 : -999EM; z-index : 1;}/ * 작은 데스크탑 */@media all and (max-width : 1200px) {.State-Indicator {z-index : 2; }}/ * tablet */@media all and (max-width : 1024px) {.state-indicator {z-index : 3; }}/ * 휴대 전화 */@media all 및 (max-width : 768px) {.state-indicator {z-index : 4; }}자바 스크립트 판단
CSS는 이미 제자리에 있으므로 JavaScript를 사용하여 임시 DOM 객체를 생성 한 다음 해당 클래스를 설정 한 다음이 객체의 z-index 값을 읽어야합니다. 기본 작문 방법은 다음과 같습니다.
// State-Indicator ElementVar indicator = document.createElement ( 'div'); indicator.className = 'state-indicator'; document.body.apple.AppendChild (indicator); // 장치를 반환하는 메소드를 만듭니다. 10);} getDevicestate () 함수는 z-index의 값을 반환합니다. 가독성을 향상시키기 위해 스위치 기능을 사용하여 출력을 표준화 할 수 있습니다 : 함수 getDevicestate () {switch (parseint (wind 부서지다; 사례 3 : 반환 '태블릿'; 부서지다; 사례 4 : 반환 '전화'; 부서지다; 기본값 : 반환 '데스크탑'; 부서지다; }}이러한 방식으로 다음 코드를 사용하여 장치 상태를 결정한 다음 해당 JavaScript 코드를 실행할 수 있습니다.
if (getDevicestate () == 'tablet') {// javaScript 코드가 태블릿 아래에서 실행}}여기에서 jQuery를 사용하는 경우 다음 코드를 사용하십시오.
$(function(){ $('body').append('<div></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 '데스크탑';먼저 생성 한 다음 얻은 다음 마지막 으로이 노드를 삭제하십시오. 특정 장치는 콘솔에서 출력됩니다. 데모를 보려면 여기를 클릭하십시오. 중간 테두리를 드래그하고 실행을 클릭 할 수 있습니다.