본문
1. -webkit-text-size-adjust
페이지가 회전할때 폰트사이즈가 자동으로 변경되지 않도록 한다
그러나 안좋은 면이 있는데 보통 webkit 브라우저들에서는 적용안됨.
none : 폰트의 자동크기변환을 막으며 모바일웹에서 일반적으로 설정한다.
n% : 폰트크기를 지정된 사이즈로 변경한다.
html {
-webkit-text-size-adjust:none;
}
<meta name="apple-mobile-web-app-capable" content="yes">
content값이 yes로 지정하면 풀스크린모드로 자동하고 그렇지 않으면 일반모드로 작동
window.navigator.standalone의 속성을 사용해서 풀스크린모드를 표시
content : yes|no
iphone os 2.1 이상
3. apple-mobile-web-app-status-bar-style
<meta name="apple-mobile-web-app-status-bar-style" content="black">
content : black | black-translucent | default
iphone os 2.1 이상
4. format-detection
<meta name="format-detection" content="telephone=no">
전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다
content : default | no
iphone os 1.0 이상
5. viewport
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
content : width [number | device-width]
height [number | device-height]
initial-scale [number], user-scalable [no | yes]
width : default 980, 범위 200 ~10,000 (숫자로 입력) 픽셀로 표시됨
height : width값에 따라 비유로 적용이 됨, 범위 223 ~ 10,000 (숫자로 입력) 픽셀로 표시됨
initial-scale
웹페이지가 보일 때 최초 한번 적용되어서 보이는 비율
zoom in에 대한 범위를 다음 속성으로 지정할수 있다.
minimum-scale : default 0.25, 범위 0 ~ 10.0
maximun-scale : default 1.6, 범위 0 ~ 10.0
user-scalable
yes | no (no 속성 - 스크롤 시 input box에 enter가 입력 되는 것을 막음
device-width : 기기 width 픽셀값
device-height : 기기 height 픽셀값
7. iphone safari Apple Touch Icon표시
Apple "favicon" 표시방법(WebClip Bookmark)
이미지 파일 사이즈 : 57 * 57
<link rel="apple-touch-icon" href=http://madebysquad.com/iphone/icon.png />
8. 아이폰에서 동영상 재생은 MP4파일로 링크
※ 오페라 같은 경우 아래와 같이 할 경우 파일이 다운됨. 옴니아2에서도 동작은 함.
아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생
<A HREF="AAAA.mp4"> 동영상보기 </A>
9. 가장 상위 오브젝트는 수치로 가로를 넣어줘야함.
ex> <div style="width=100%;">
-> <div style="width=480px;">
10. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기
META 태그를 쓰면 화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다.
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서
관련링크
- 이전글아이폰 html5 드로잉 소스 11.05.13
- 다음글Cocos2d 멀티터치를 활용해서 총알 발사와 이동을 동시에 처리하기 11.05.13
댓글목록
등록된 댓글이 없습니다.