전 회사에서도 모바일웹을 제작하고 모바일로 접속 시 모바일 페이지로 가도록 포워딩 하는 방식을 작업했었다.
그당시에는 찾아 보다가 스크립트를 이용한 방식으로 작업을 진행한 적이 있다.
|
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile == true) {
location.href="모바일페이지";
}
|
대략 이런식으로 작업했던 기억이 있다.
하지만 요즘엔 미디어쿼리가 대세!!
그래서 나의 블로그에는 미디어쿼리를 적용해 보았다. 미디어 쿼리는 브라우저의 사이즈에 따라 스타일이 변경되는
장점이 있기 때문에 해상도가 작은 컴퓨터나 기기등 다양하게 적용이 가능하다.
단 CSS노가다를 해야한다는 점이 힘들긴하다.
일단 480 사이즈와 내가 아이폰을 사용하기 때문에 380정도의 사이즈 이렇게 2가지 스타일을 더 작업하였다.
처음에는 480이하 사이즈만 적용을 하려고했지만 나의 아이폰으로 테스트한 결과 화면이 더 작다는 문제...
더불어 아이폰에서 사용하고 있는 사파리는 다른 브라우저와 웹표준부분에서 차이가 있어 따로 380사이즈를 적용하였다.
미디어 쿼리는 CSS부분에 원하는 사이즈를 지정해 놓고 그안에 스타일을 적용하면된다.
|
@media all and (max-width: 480px){
적용할 스타일 ( 예: .table{background:#dddddd} )
}
|
이런식으로 진행해 주면된다. 하면서 깨닳은 점은 기존에 써있는 스타일을 없애기 위해선 반드시 지정을 해줘야 된다는점
예를 들어 margin:5px 를 넣었는데 이것이 필요 없다고 지우면 그대로 남아있다. 그 이유는 기존에 있는 스타일은 그대로
가져다 쓰고 수정할 부분만 추가해 주는 방식이기 때문이다.
따라서 mrgin:0px; 로 수정해 주어야지 없어 진다는 점..
스타일 적용을 완료했으면 스타일시트를 링크하는 페이지에 다음과 같은 매타태그를 입력해 줘야지 사용이 가능하다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>:: 진리닷컴 - Zinlee.com ::</title>
<link rel="stylesheet" href="./css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/common_mobile.css" type="text/css" media="all">
|
아직 완벽하게 적용한 것은 아니다. 완벽하게 하기 위해선 기기별로 테스트를 해 보아야 하기 때문에 일단은 아이폰4에만
맞게 작업을 해 놓았다.
시간나는대로 미디어 쿼리에 대한 정보를 정리해 두어야 겠다.