요소가 표시되는지 확인할 수있는 경우 matchMedia를 사용해야하는 이유는 무엇입니까?

나는 matchMedia가 IE9에서는 지원되지 않지만 미디어 쿼리는 지원된다고 생각합니다.요소가 표시되는지 확인할 수있는 경우 matchMedia를 사용해야하는 이유는 무엇입니까?

나는 여기에 요점하지만 다음과 같이 자바 스크립트의 조건 당신은 단순히 스타일 시트

.desktop_view{display:block;} 
.mobile_view{display:none;} 

@media all and (max-width: 700px){ 
    .desktop_view{display:none;} 
    .mobile_view{display:block;} 
}

에 다음 코드를 추가 할 수 있습니다 때 왜 matchMedia를 사용하고 확인 할 수있다?

if($("div.desktop_view").is(":visible")){ 
    // Do something applicable to desktops 
}

출처

2017-10-14 wurzel_gummidge

그래서 지금은 전용 메소드가있을 때 더 복잡한 방식으로 동일한 것을 달성하는 코드를 추가하지 않으시겠습니까? 우리는 현대의 코드를 작성하고 돌 시대의 솔루션을 영원히 끌어 오지 않으려 고하고 있기 때문에 탈것을 따라 오래된 브라우저를 대량으로 가져 오는 것만으로도 엄청난 보안 재앙입니다. (우리가 실제로 "해야만하는"상황에서 그 주위에 방법이 없다면 대부분의 경우 polyfill을 사용하는 편이 낫습니다.) – CBroe

matchMedia가 아무 것도하지 않았 음을 간절히 원했습니다. 내가하지 않은 것 같아. 감사. –

window.matchMedia은 당신보다 더 강력합니다. 프로그래밍 방식으로 브라우저의 네이티브 미디어 쿼리 구문 분석을 사용할 수있을뿐만 아니라 리턴 객체 (MediaQueryList)를 사용하면 사용자의 뷰포트 변경 사항에 해당하는 이벤트 (예 : onchange)를 수신 할 수 있습니다.

MDN Web Docs 당 :

이 가능 자사의 미디어 쿼리를 변경할 때 대신 값을 주기적으로 폴링으로 감지 할 수있는 문서를 관찰 할 수 있습니다, 당신은 프로그래밍 미디어 쿼리를 기반으로 문서를 변경할 수 있습니다 지위.

이 이벤트 핸들러를 사용하면 스타일 변경 (예 : 풍경으로 회전하는 모바일 사용자 추적)보다 복잡한 기능을 개발할 수 있습니다.이 기능을 사용하면 사이트가 세로 방향으로 사용하기에 적합하도록 설계되었습니다.

출처

2017-10-14 21:52:41

나는 'onchange 이벤트 듣기'제안을 구현했으며 잘 작동했습니다. 그러나 응용 프로그램을 개발중인 회사는 구버전의 브라우저를 사용하는 방문자를 많이 방문합니다. 필자는 다시 생각해 보았고 이제는 덜 지원되는 matchMedia를 사용하지 않고 미디어 쿼리 만 사용하여 내 응용 프로그램을 구성 할 수 있다는 것을 알았습니다. 따라서 대형 데스크톱 및 소형 모바일의 페이지에서 올바른 요소 레이아웃을 세로 및 세로로 타블렛을 회전하여 간단히 확인할 수 있습니다. 경치. 그러나 나는 matchmedia와 onchange의 사용을 다른 응용 프로그램에서도 염두에 두겠습니다. 감사. –

요소가 표시되는지 확인할 수있는 경우 matchMedia를 사용해야하는 이유는 무엇입니까?

답변

관련 문제