Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

JavaScript에 미디어쿼리를 사용하는 matchMedia()

요즘은 모바일과 데스크톱용 사이트를 따로 만드는 대신 웹사이트를 반응형으로 만들어서 다양한 해상도에 대응하는 것이 자연스럽다고 생각한다. 웹사이트를 반응형으로 만들려면 CSS 미디어쿼리를 사용해야 한다. 사용자의 화면 크기 등에 따라 다르게 보여줄 수 있으므로 아주 유용하고 CSS 미디어쿼리를 사용하면 요즘처럼 다양한 크기의 디바이스가 존재하는 상황에서도 모든 사용자에게 적절한 화면을 제공할 수 있다.(물론 다 맞추려면 엄청나게 귀찮지만)

반응형 웹사이트를 만들 때 항상 피곤한 부분 중 하나가 자바스크립트 영역이었다. 다양한 경우가 있지만, 예를 들어 화면에 애니메이션 효과가 있어서 A라는 요소를 100px 움직여야 하는 경우 이 100px은 당연히 해상도에 따라 크기가 달라져야 하므로 화면의 크기를 구해와서 그에 따라 조건문으로 움직이거나 해야 하는데 손이 꽤 많이 가게 된다.

matchMedia

최근에 JavaScript에도 CSS의 미디어쿼리와 같은 matchMedia 함수가 존재한다는 것을 알게 되었다.

var media = window.matchMedia(mediaQueryString)

위와 같이 사용하는데 mediaQueryString부분에는 CSS의 미디어쿼리 문법이 들어간다.

matchMedia("screen and (orientation:portrait)");
matchMedia("only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)")

위와 같이 CSS에서 사용하는 미디어쿼리 문을 그대로 사용할 수 있으므로 사이트에서 필요한 미디어쿼리의 조건을 자바스크립트에서 그대로 사용할 수 있어서 편하다.

var m = matchMedia("screen and (min-width: 1024px)");
m.media // -> "screen and (min-width: 1024px)"
m.matches // -> true

matchMedia() 함수는 MediaQueryList를 반환하는데 이 객체는 mediamatches라는 두 프로퍼티가 존재한다.media는 사용한 미디어쿼리 문자열을 반환하고 matches는 현재 화면에 미디어쿼리의 범위에 들어가면 true를 반환하고 아니면 false를 반환한다.

if (matchMedia("screen and (min-width: 1024px)").matches) {
  // 1024px 이상에서 사용할 JavaScript
} else {
  // 1024px 미만에서 사용할 JavaScript
}

실제로 사용할 때는 분기 문으로 나누어서 코드를 적용하면 된다. 당연한 얘기지만 사이트를 띄운 다음에 브라우저 크기를 줄인다고 CSS처럼 자동적용이 되는 것이 아니므로 resize이벤트와 묶어서 사용해야 해상도에 따라 제대로 처리할 수 있다.

caniuse의 matchMedia 브라우저 지원 상황

caniuse를 보면 브라우저 지원상황도 꽤 좋은 편이라서 IE 8, 9만 아니라면 사용하는 데 문제가 없다. (IE 8, 9를 버릴 수 있는가하는 현실적인 문제가 있지만...)

2015/06/14 23:52 2015/06/14 23:52