[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정
-webkit-text-size-adjust:none;

viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응.

2. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

3. 상단 url바 숨기기

<script type="text/javascript">
window.addEventListener("load",function(){
 setTimeout(scrollTo,0,0,1);
 },false);
</script>

4. 전화번호 기능

<a href="tel:000-0000-0000">전화걸기</a>
<a href="sms:000-0000-0000">문자보내기</a>
<a href="sms:">문자보내기 실행</a>

5. 키보드 호출

<input type="text" />

<input type="search" />

<input type="tel" />

<input type="url" />

<input type="email" />

<input type="time" />

<input type="number" />

<input type="datetime" />

<input type="week" />

<input type="date" />

6. 아이폰 전화번호 자동 인식 제한

<meta name = "format-detection" content = "telephone=no"/>

7. 아이폰 바로가기 만들기

// 반사광 효과를 주는 경우

<link rel="apple-touch-icon" href="home-icon-name.png">

// 반사광 효과가 없는 경우

<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">

apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면 위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.

8. 아이폰 상태바 색상 설정

아이폰 상단의 상태 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">

: 이런것도 있네 ㅎㅎ

9. Splash Screen

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할 때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 스플래시 스크린을 추가하는 방법은 간단합니다.

<link rel="apple-touch-startup-image" href="startup.png">

해당 이미지의 사이즈가 320 x 460 px 로 맞춰야 하며
전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.

10. 전반적인 em작업시

1em = 16px
12(사용하고싶은px) / 16(기준크기px) = 0.75
- em 계산기
http://pxtoem.com/
http://riddle.pl/emcalc/

11. input 한글 자판 출력하고 싶을때(모바일 X)
style="ime-mode:auto"- 현재 선택되어 있는 상태로 한/영중 선택
style="ime-mode:active"
- Default로 한글 선택 되는 모드
style="ime-mode:inactive"
- Default로 영문 선택 되는 모드
style="ime-mode:disabled"
- 무조건 영문만 입력되도록 하는 모드 (한글 입력 안됨)
style="ime-mode:disabled; text-transform:uppercase;"
- 무조건 영문 대문자만 입력되도록 적용
<input type="text" onpaste="javascript:return false;" />

-붙여넣기 방지

12. 미디어쿼리
@media all and (max-width:359px) //아이폰 및 세로 320사이즈 폰에서 적용
@media all and (min-width:640px) //가로 640 사이즈 폰에서 적용
@media all and (min-width:768px) //768사이즈 이상 태블릿PC에서 적용 (공통)
@media all and (min-width: 768px) and (orientation:portrait) // 태블릿 세로모드
@media all and (min-width: 1024px) and (orientation:landscape) // 태블릿 가로모드

[출처] 한글/영문만 입력 받는 input 만들기|작성자 서일영

[출처] 한글/영문만 입력 받는 input 만들기|작성자 서일영

[출처] 한글/영문만 입력 받는 input 만들기|작성자 서일영