1. meta & link
[Viewport] - 기본설정
모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다.
기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다.
다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
width : 넓이 - device-width | N px (200~10000 px, default 980 px)
height : 높이 - device-height | N px (223~10000 px)
initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 - N (0~10, default 0.25)
maximum-scale : 최대 확대 배율 - N (0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 - yes | no (default yes)
각각의 설정 값과 기본 값은 위와 같으며, 사용자에 따라 최적화된 환경을 제공할 수 있도록 각각의 속성을 설정하는것이 중요합니다.
[자동 전화걸기 태그 방지] - 기본설정
<meta name="format-detection" content="telephone=no" />
전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다.
// [전체화면 모드]가 적용된 경우는 자동 전화걸기 태그 방지가 먹지 않습니다.;;
[홈 화면 아이콘] - 기본설정
아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다.
단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는
기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.
// 반사광 효과를 주는 경우
<link rel="apple-touch-icon" href="../images/icon.png" />
// 반사광 효과가 없는 경우
<link rel="apple-touch-icon-precomposed" href="../images/icon.png" />
apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면
위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.
기기별 홈 아이콘 이미지 사이즈
: 아이폰3G, 아이폰3GS [ 사이즈: 57*57 ]
: 아이패드 [ 사이즈: 72*72 ]
: 아이폰 4 [ 사이즈: 114*114 ]
홈 아이콘 작업시 주의사항!!
- 이미지는 네모 : 사파리 브라우저에서 홈 아이콘 등록시 기본으로 라운드 박스 효과 적용됩니다.
- 라운드 박스 작업 No : 이미지를 라운드 박스로 작업할 경우 홈아이콘 추가시 깨져보임니다.
- 반사광 없이 작업 : 기본으로 반사광이 들어가며, 반사광 여부를 설정할 수 있습니다.
- 이미지는 png로 저장!!
[파비콘] - 기본설정 추천
안드로이드 스마트폰은 버전에 따라 홈화면 아이콘 및 파비콘을 홈화면 아이콘으로 사용합니다.
일부 낮은 버전에는 책갈피 모양만 나오는 경우가 있습니다.
파비콘 *.ico
포토샵 & 아래 사이트를 이용해 이미지를 만들수 있다.
http://www.favicon.cc/ 그림판 같은.. 도트로 파비콘을 만들 수 있는 사이트
http://www.degraeve.com/favicon/ 직접그려서 만들수도 있고, 기존 이미지 변환도 시켜준다
<link href="/favicon.ico" rel="shortcut icon">
홈 아이콘 & 파비콘 등록 방법 : link & root & js (아이폰vs안드로이드 & 버전에따라 넣을경우는 js을 이용합니다.)
[툴바감추기] - 기본설정 (세트)
자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.
<script type="text/javascript">
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
[전체화면 모드] 아이폰용 (툴바감추기도 적용되어 있어야 적용됩니다.) (세트)
웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다.
단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.
<meta name="apple-mobile-web-app-capable" content="yes">
자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.
[스플래시 스크린] 아이폰용 (세트)
스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다.
<link rel="apple-touch-startup-image" href="/images/startup.png">
전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.
<meta name="apple-mobile-web-app-capable" content="yes" />
덧. 빠르게 화면이 열릴때는 안보이거나 잠시 보여진 후 화면이 메인으로 넘어감니다.
스플래시 스크린 이미지 사이즈
- iPhone3 320 * 480 => 320 * 460
- iPhone4 640 * 960 => 640 * 940
- 아이패드 768 * 1024 =>768 * 1004
[상태바 색상 설정] (bar에 style 입히기) 아이폰용 (세트)
아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다.
특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.
<meta name="apple-mobile-web-app-status-bar-style" content="default"> // 기본 밝은 계열
<meta name="apple-mobile-web-app-status-bar-style" content="black"> // 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> // 반투명 검정색
: 반투명하게 할 경우 bar 높이만큼(20) 여백을 주어야 합니다. 아니면 본문내용이 반투명한 바와 겹치게 됩니다.
[화면 높이가 너무 짧을 경우]
<meta name="viewport" content="height=device-height,width=device-width" />
: 경우에 따라 사용하셔야 합니다. 세로화면에서 적용한 경우 가로모드로 돌려볼 경우 화면깨짐 현상이 생겨남니다.
세로 고정인 웹앱인 형태나 가로모드지원을 안하는 모바일 웹작업할 경우 유용할 듯 합니다.
2. css
[폰트 사이즈 고정하기] - 기본설정
모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라
폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.
폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
[css의 분리]
<link rel="stylesheet" href="small-screen.css" type="text/css" media="only screen and (max-device-width: 480px)" />
3. mobile기법
ir 기법 & 스프라이프기법
4. tel schema
스키마 링크
tel: 스키마 : <a href="tel:12345678900">Call me</a>
sms: 스키마 : <a href="sms:12345678900">Send me a text</a>
----------------------------------------------------------------------------------
rotation
window.onorientationchange = function() {
alert(window.orientation);
}
터치 이벤트 핸들러
touchstart
touchmove
touchend
touchcancel
터치 제스처 핸들러
gesturestart
gesturechange
gestureend
개발 관련 샘플
http://www.iphonewebdev.com/examples/
validator
w3c : http://validator.w3.org/mobile/
mobi : http://ready.mobi/launch.jsp?locale=en_EN
UI frame work
iwebkit : http://iwebkit.net
jqtouch : http://www.jqtouch.com/
yahoo blueprint : http://mobile.yahoo.com/developers
wapl : http://wapl.info/
PhoneGap- Create Applications with HTML and Javascript : http://www.phonegap.com/
iPhone User Interface Framework : http://code.google.com/p/iui/
개발 사이트
사파리 개발 : http://developer.apple.com/safari/
오페라 미니 미리보기(JAVA) : http://www.opera.com/mobile/demo/
디자인 관련
모바일 사이트 샘플 : http://www.mobileawesomeness.com/
아이폰 PSD 백터 : http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
아이폰 4 : http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
아이폰 개발 어플 : http://itunes.apple.com/app/liveview/id301069270?mt=8
벡터 아이콘 : http://www.iphonedesigntools.com/
CSS3 관련
모바일 사이트 샘플
CSS3 Box-sizing
CSS3 Colors
CSS3 selectors
CSS3 Rounded corners (border-radius)
CSS3 Text-shadow
CSS3 Box-shadow
CSS3 Transforms
CSS3 Multiple backgrounds
CSS3 Border images
CSS3 Background-image options
CSS3 Transitions
CSS3 Multiple column layout
CSS3 Grident
pure css3 : http://graphicpeel.com/cssiosicons
css3 btn : http://css3pie.com/
크로스 브라우징
/* FireFox 3.6 */ background-image: -moz-linear-gradient(top, #9FD4FF, #008CFF); /* Safari4+, Chrome */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #008CFF),color-stop(1, #9FD4FF)); /* IE6,IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF'); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9FD4FF', endColorstr='#008CFF')";
font-face
google API : http://code.google.com/webfonts
html5 관련
html 레이아웃만들기
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
html cavas 예제
http://9elements.com/io/projects/html5/canvas/
Canvas (basic support)
Audio element
Video element
GEO관련
http://isithackday.com/hacks/geo/yql-geo-library/
[출처] 모바일 웹 개발시 유용자료 (meta 설정 등등)|작성자 딱히
'모바일웹 > Tip&Tech' 카테고리의 다른 글
| 모바일웹 관련 rlqhs CSS (0) | 2013.05.23 |
|---|---|
| [펌]모바일 웹 환경 설정 하기 (0) | 2012.09.18 |
| 추천 웹 사이트 (0) | 2011.03.27 |
| [서블릿기초] 5. 초간단 MVC 만들어보기 JSP기초정리 / JSP (0) | 2010.12.15 |