http://ekjeon5783.blog.me/141022543
1. 바로가기 아이콘 만들기
안드로이드 gonabi.ico 지원
아이폰 아이패드
gonabi.png 지원
이미지를 2개 만들고 메타태그 적용
<link rel=”shortcut icon” href=”img/common/coforward.ico” /> // 안드로이드
<link rel=”apple-touch-icon” href=”img/common/coforward.png” /> //아이폰
2. 브라우저 크기에 따라 웹용 css, 모바일용 css 적용하기
ex>
<link href=”css/layout.css” type=”text/css” rel=”stylesheet” media=”screen and (min-width:769px)” /><!–PC용 CSS–>
<link href=”css/layout_mobile.css” type=”text/css” rel=”stylesheet” media=”screen and (max-width:768px)” /><!–mobile용 CSS–>
설명
<header> 부분을 위와 같이 수정하면 가로 폭 780px 이상일 때는 “layout.css” 가 적용되고, 그 미만일 때는
layout_mobile.css가 적용됩니다.
구조적으로 잘 구성된 html은 모바일 환경에서도 css를 적용하지 않고, 디자인이 없는 상태에서도
충분히 사용할 수 있습니다.
실례로 예전에 오페라 모바일 웹 브라우저의 모바일 모드는 웹 페이지에서 css를 차단하는 것이었습니다.
3. 세로 스크롤 길어지는 문제 해결
세로 스크롤이 길어진다고 해서 크게 문제될 것은 없지만 그 페이지에서
다른 페이지로 이동하고자 할 때 메뉴 부분으로 이동해야 하므로 메인 메뉴의 위치에
따라 스크롤을 다시 올려야 하는 경우가 발생합니다.
하단에 처음으로 가기 버튼을 만들어 앵커포인트 설정
<a class=”accesibility” id=”skipBottom” href=”#skipTop”>처음으로 가기</a> </div>
4. 모바일용 스킵네비게이션
<a class=”accesibility” id=”skipTop” href=”#mainPageContent”>콘텐츠 바로가기</a>
/*반복네비게이션 링크*/
#skipTop{
position:absolute;
width:0;height:0;font-size:0;
overflow:hidden;visibility:hidden;
}
5. 해상동 맞추기
*더높은 해상도를 가지고 있는 것처럼 작동
– 아이폰 3G의 경우 실제 가로 해상도는 320px이지만 아이폰의 사파리의 웹브라우저는 기본적으로 980px인 것처럼 작동합니다.
그러므로 모바일 기기에서 Media Query가 예상한 대로 작동하기 위해서는 웹 브라우저의 가상 해상도를
기기의 물리적 해상도와 일치시킬 필요가 있습니다. 모바일 웹 브라우저들은 웹 브라우저의 가상 해상도를 조절할 수 있는 viewport 메타 태그를 지원합니다.
<meta name=”viewport”
content=”
width=[가상 해상도];
initial-scale=[초기 확대 축소 비율];
maximum-scale=[최대 확대 비율];
user-scalable=[사용자에 의한 확대 축소 허용 여부];”
/>
<meta name=”viewport”
content=”
width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no”
/>
width: 넓이 -device-width | N px (200~10000 px, default 980px)
height: 높이 -device-height | N px (223~10000 px)
inital-scale: 초기 확대/축소 비율
minimum-scale: 최대 학대 비율 – N (0~10, default 0.25)
maximum-scale: 최대 확대 비율 – N (0~10, default 1.6)
user-scalable: 확대/축소 가능 여부 – yes | no (default yes)
<!– 모바일용 화면 크기 비율 고정 –>
<meta id=”mobileMeta” name=”viewport” content=”width=device-width” />
설명
viewport 메타 태그에서 width를 device-width로 지정하면 기기의 물리적 해상도와 웹 브라우저의 해상도를
일치시킬 수 있습니다. 모바일 기기에서 Media Query가 예상한 대로 작동하기 위하여 viewport 메타 태그를 지정한 <head> 영역은 다음과 같습니다.
<meta id=”mobileMeta” name=”viewport” content=”width=device-width” />
정리
웹 사이트의 viewport 메타 태그는 폭만 device-width로 지정하고 * 사용자에 의한 확대, 축소를 기본값(허용)으로 하였습니다.
* 사용자에 의한 확대, 축소를 기본값(허용)으로 하였습니다.
– 사용자에 의한 확대, 축소를 허용하지 않으면 웹 사이트 제공자가 원하는 웹 사이트의 형태를 고정적으로 제공할 수 있겠지만,
그것만을 위해 확대, 축소를 막는 것은 그다지 좋은 생각이 아닙니다. 확대가 필요한 경우는 웹 사이트의 전체적인 디자인 형태가 아니라
콘텐츠를 보고자 하는 경우일 것이고, 확대를 필요로 하는 사용자들에게는 제약 사항이 될 수도 있기 때문입니다.
6. 홈 화면 바로가기 아이콘은 다음과 같은 형식으로 등록합니다.
<link rel=”shortcut icon” href=”img/common/coforward.ico” />
<link rel=”apple-touch-icon” href=”img/common/coforward.png” />
<link> 요소의 rel 속성값을 apple-touch-icon 으로 지정하고 href 속성에
아이콘으로 사용할 이미지 경로를 지정합니다.
이때 사용되는 이미지는 가로, 세로 57px 의 png 파일입니다.
apple-touch-icon
아이폰이나 아이팟 터치에서 사용할 수 있는 홈 화면 바로가기 아이콘으로 등록하는 것은 애플사의 기기들을
위한 것이었지만 안드로이드 기반의 기기들도 이 아이콘을 지원합니다.
apple-touch-icon은 <link>로 지정하는 것이 기본이지만 <link>로 지정하지 않고 웹 사이트의 root 폴더에
apple-touch-icon.png라는 이름으로 아이콘을 작성하면 아이폰 운영체제의 모바일 사파리에서는 이를
자동으로 홈 아이콘으로 사용합니다.