사이트 내 전체검색
iPhone Safari 웹개발 기본 팁
로빈아빠
https://cmd.kr/iphone/54 URL이 복사되었습니다.

본문

1. -webkit-text-size-adjust

페이지가 회전할때 폰트사이즈가 자동으로 변경되지 않도록 한다
그러나 안좋은 면이 있는데 보통 webkit 브라우저들에서는 적용안됨.

auto : default값, 화면의 폭에 맞추어서 텍스트 크기가 자동으로 조절된다.
none : 폰트의 자동크기변환을 막으며 모바일웹에서 일반적으로 설정한다.
n% : 폰트크기를 지정된 사이즈로 변경한다.

html { 
      -webkit-text-size-adjust:none;
}


2. apple-mobile-web-app-capable

<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 이라 생각해서

댓글목록

등록된 댓글이 없습니다.

Search

Copyright © Cmd 명령어 18.117.196.184