파이어폭스에서 미디어쿼리 테스트할 때 주의해야할 것

미디어쿼리(media query)는 단말기의 종류에 따라 각각 다른 스타일시트(CSS)를 적용할 수 있도록 도와주는 기능입니다.

최근 반응협 웹디자인(responsive web design)이 강조되면서

하나의 웹페이지를 만들고 미디어쿼리를 통해 단말기 또는 해상도마다 다른 CSS를 적용하므로써

최적화된 UI를 보여주는 용도로 사용되고 있습니다.

위 사례 말고도 검색해보시면 더 많은 사례들이 있습니다.(이미지출처 : http://designmodo.com/responsive-design-examples/)

미디어 쿼리를 사용하는 방법은 여러가지가 있지만 아래와 같이 CSS 선언을 통해서 적용이 가능합니다.

@media screen and (max-width: 1025px){
}

@media screen and (max-width: 769px){
}

@media screen and (max-width: 321px){
}

max-width 또는 min-width를 기준으로 보통 해상도에 맞춰 UI를 다르게 표현합니다.

미디어 쿼리를 이용하여 웹페이지를 제작할때 테스트를 위해서 브라우저 크기를 직접 변경, 조절하여 테스트를 하는데요.

파이어폭스를 이용하여 테스트 할때 참고하셔야할 것이 있습니다.

바로 width의 크기인데요.

엄밀히 얘기하면 min-width, max-width의 width값은 브라우저의 크기가 아니라,

브라우저가 렌더링하는 canvas 혹은 document 혹은 view 라고도 부를 수있는 웹페이지 영역의 크기를 말합니다.

크롬 브라우저를 예로 들어 설명 해보겠습니다.

크롬 브라우저 가로 길이를 좀 더 줄여보겠습니다.

크롬 브라우저의 가로 크기를 300px 미만으로 줄였을때 주소표시줄과 기타 컨트롤 도구들이 함께 조절되면서

실제 view의 크기도 300px 미만으로 줄어듭니다.

반면 파이어폭스의 경우를 살펴보겠습니다.

여기서 브라우저 크기를 300px 미만으로 줄여보겠습니다.

크롬과 달리 파이어폭스는 브라우저 크기는 300px 미만으로 줄였지만

실제 웹페이지의 view의 크기는 줄어들지 않습니다.

브라우저의 입장에서는 다른 컨트롤 도구들의 영역이 보이지는 않지만 살아있는 셈이거든요.

바로 이렇게 말이죠.

그렇기 때문에 주소표시줄에 달려있는 컨트롤 도구들이 여러개 있는 경우

아마도 여러분은 파이어폭스 브라우저의 view영역에 해당하는 크기를 300px 미만으로 줄일 수 없습니다.

미디어쿼리로 300px 내외의 조건을 만들고 파이어폭스로 테스트를 위해서는 아래의 방법을 사용하세요.

설정 메뉴를 통해 주소창 모음을 보이지 않게 하여

300px 미만의 미디어쿼리가 적용될 수 있는 환경을 만들 수 있습니다.

바로 이렇게!