Window.matchMedia() 메서드는 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환합니다.

구문

window.matchMedia(mediaQueryString)

매개변수

mediaQueryString
분석할 미디어 쿼리를 나타내는 문자열.

반환 값

주어진 미디어 쿼리에 대한 MediaQueryList 객체,

예제

다음 예제는 화면이 매우 좁을 때 다른 작업을 수행합니다.

if (window.matchMedia("(min-width: 400px)").matches) {
  /* 뷰포트 너비가 400 픽셀 이상 */
} else {
  /* 뷰포트 너비가 400 픽셀 미만 */
}

더 많은 예제는 Testing media queries programmatically를 참고하세요.

명세

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Window.matchMedia()' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
matchMediaChrome Full support 9Edge Full support 12Firefox Full support 6IE Full support 10Opera Full support 12.1Safari Full support 5.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 6Opera Android Full support 12.1Safari iOS Full support 5Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, dragmove
최종 변경자: alattalatta,