반응형 웹을 만드는데 레이아웃 크기가 지정된 크기보다 작게 나오고 글자크기가 불규칙하게 크게 나오는 경험을 하신 분 있으신가요? 가리사니를 처음 만들때 모바일 사이트를 따로 만들까 반응형웹을 만들까를 고민하다가 일단 PC버전을 만들고 적절히 확대 해주자?! 라고 생각한 후 아래와 같은 코드를 넣었습니다.

<meta name="viewport" content="initial-scale=0.7, maximum-scale=4.0, minimum-scale=0.5, user-scalable=no" />

시간이 지나 반응형 웹을 만드려는데 대재앙이 발생합니다.!!

적절히 확대 해주자?!

예를들어 필자가 가지고있는 "넥서스 5"의 해상도는 1080 x 1920 이지만 기본으로 깔린 모바일 크롬을 켰을때 픽셀은 약 360 * 567 정도 입니다.(이 수치는 소프트나 설정마다 조금씩 다르니 절대적 수치는 아닙니다.) 즉, 확대는 커녕 축소를 해줘야합니다. 그럼 왜! 브라우저에서의 픽셀은 다른것인가!!!!!

모바일 기기에서 픽셀은 사실 픽셀이 아니다!!

참조 1 : http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html 참조 2 : https://developer.mozilla.org/ko/docs/Mozilla/Mobile/Viewport_meta_tag

그럼 모바일 마다 다른 가로 픽셀을 어떻게 맞춰야하나!!

크롬 브라우저에서 개발자 도구를 열고 메뉴부분의 휴대전화기[모바일기기] 모양의 아이콘을 클릭합니다. 그러면 몇가지 기기에 대한 해상도나 나타나게됩니다. 하지만 모든 기기가 써있는 것도아니고... 하지만 2015년 기준으로 가로를 360px 정도로 맞춘다면 거의 모든 기기를 커버할 수 있습니다.

다시 원점으로 뷰포트 (viewport) 는 무엇인가?

<meta name="viewport" content="initial-scale=0.7, maximum-scale=4.0, minimum-scale=0.5, user-scalable=no" />

• user-scalable : 유저가 크기를 조정할 수 있는지 여부.
• initial-scale : 시작시 스케일
• minimum-scale : 최소 스케일
• maximum-scale : 최대 스케일 메타태그의 뷰포트 정보를 보고 scale에 관련된 문구가 있다면 브라우저들은 이렇게 생각합니다. (이 사이트는 모바일에 최적화된 사이트가 아니구나.. 내가 인공지능적으로 사이즈를 조절해줘야겠어!) 하지만 이 스케일은 브라우저의 확대 축소같은 전체적 스케일이 아닙니다.!! 내가 인공지능적으로 사이즈를 조절해줘야겠어! 내가 인공지능적으로 사이즈를 조절해줘야겠어! 내가 인공지능적으로 사이즈를 조절해줘야겠어! ........ 브라우저는 저 구문을 보는 순간 사이트에서 중요한 것과 중요하지 않는것 본문처럼 보이는것에 대해서 마음대로 확대나 축소를 시작합니다. 특히 최소 가로크기가 800 픽셀이라면 가로크기가 360인 상태에서 최소가로 크기인 800 픽셀을 360까지 나눈다음에 거기서부터 브라우저는 요리!?를 시작합니다. (물론 구글링을 하다보면... 이걸 피하는 꼼수들이 나와있지만... float:left 같은..;; 그런것을 쓸 바에.. 그냥.. 반응형웹을 만드세요!! 그게 빨라요!!)

이 사이트는 모바일웹에 대비해서 만들어졌어!! 브라우저야 내 레이아웃에 손대지 말아줄래?

<meta name="viewport" content="width=device-width, user-scalable=no" />

바로 위 처럼 width=device-width 를 통해 가로크기는 디바이스 가로크기와 동일하다 라는것을 명시해주고 유저가 확대나 축소를 하지 못하게 막아두면 브라우저들은 아! 저사이트는 반응형웹에 충실하구나 난 레이아웃을 건들지 말아야지. 라고하며 확대 축소를 하지 않게됩니다.

미디어 쿼리!

참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 설명은 거창하지만 필자는 사실 2개의 속성만 써도 충분한 반응형웹을 구사할 수 있다고 생각합니다. 간혹 max-device-width 를 쓰는경우가 있지만 width=device-width 가있다면 max-device-width = max-width 이기에 무의미 합니다.

/* 가로가 700px 이하일때 */
@media (max-width: 700px)
{
	/* 배경을 검정색으로! */
	body { background:#000 }
}

위와 같은 미디어 쿼리 속성으로 자주 쓰일 수 있는 것 두가지는 max-width, max-height 이렇게 두가지가 있습니다. 반대로 min-width, min-height 도 있지만 필자의 경우는 추천하지 않습니다. 이유는 min-*, max-*는 이상, 이하를 나타냅니다..!!!!!! 즉 아래와 같은 코드가 있을 경우 700px 이되면 두 미디어 쿼리가 모두 작동하게됩니다.

/* 가로가 700px 이하일때 */
@media (max-width: 700px)
{
	/* 배경을 검정색으로! */
	body { background:#000 }
}
/* 가로가 700px 이상일때 */
@media (min-width: 700px)
{
	/* 배경을 검정색으로! */
	body { color:#f00 }
}
/* 그렇다면 가로가 700px 일경우는?? -> 둘다 작동!!!!!! */

또한 orientation: landscape 같은 쿼리도 있지만... 필자는 이를 별로 좋아하지 않습니다. 물론 이건 특별히 문제를 일으키는 것은 아니지만. 패드 같은 디바이스의 경우 세로로 있는 상태라도 충분한 가로 크기가된다면 굳이 모바일폰과 같은 화면을 보여줄 필요는 없다고 생각합니다. 물론 위 속성은 취향의 차이입니다. !!

난 미디어 쿼리가 있는 css 파일을 따로 만들고싶어!!

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

위와 같이 주시면됩니다.!!

자바스크립트로 미디어 쿼리의 상태를 확인하고싶을땐!

var rv = window.matchMedia( "(min-width: 500px)" );
// rv 값 : true | false