1. Meta Tag

1.1. Viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>

• width=device-width : 페이지를 자동으로 사용자 디바이스 크기에 맞춤
  - PC전용 웹페이지의 경우 1100, 1200 등의 고정 값 사용 가능
• initial-scale=1.0 : 페이지 로딩 시의 확대 비율
• maximum-scale=1.0 : 허용가능한 확대비율의 최대치
• minimum-scale=1.0 : 허용가능한 축소비율의 최대치
• user-scalable=0 : 사용자 확대보기 유무 (yes==1, no==0)

1.2. Information

// 기본
<title>웹사이트 제목</title>
<meta name="description" content="설명">
<meta name="Keywords" content="키워드1, 키워드2 ...">

// Open Graph Protocol (SNS)
<meta property="og:title" content="제목">
<meta property="og:description" content="설명">
<meta property="og:keyword" content="키워드1, 키워드2 ...">
<meta property="og:image" content="대표 이미지(200x200)">
<meta property="og:url" content="URL">

// Twitter: Open Graph로 대체 가능, 트위터 카드 타입만 사용해도 OK
<meta name="twitter:title" content="제목">
<meta name="twitter:description" content="설명">
<meta name="twitter:image" content="대표 이미지(URL)">
<meta name="twitter:card" content="트위터 카드 타입">

2. Favicon

<link rel="icon" sizes="196x196" href="favicon-196.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon-180.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="favicon.ico">

3. Form Element

3.1. Input Type Keboard

• type="text" : 한글 우선
• type="password" : 영문 우선
• type="email" : 영문 우선 ➕ @ / .
• type="tel" : 숫자 우선
• type="url" : 영문 우선 ➕ . / .com
• type="search" : 숫자 우선
• autocapitalize="off" : 아이폰 첫 글자 입력 자동 대문자 막기

3.2. Anchor Href Attribute

<a href="tel:0000-0000">전화하기</a>
<a href="sms:0000-0000">문자보내기</a>
<a href="mailto:메일주소">메일보내기</a>

4. CSS

4.1. 화면전환시 텍스트 크기 고정

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

만약 Webview에서 위 CSS를 줘도 안 먹는다면, 앱 개발자에게 하단 코드요청!

//(안드로이드 기준)
WebView webview = (WebView)appView.getView();

WebSettings settings = webview.getSettings();
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH)
  settings.setTextZoom(100);

4.2. 클릭 하이라이트 제거

body {outline: none; -webkit-tap-highlight-color: transparent}

5. Javascript

5.1. Device Check

var userAgent = navigator.userAgent.toLowerCase();
var devices = new Array('iphone','ipod', 'ipad','android','blackberry','windows ce','nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');

for(var i=0;i<mobilePhones.length;i++){
    if(uAgent.indexOf(mobilePhones[i]) != -1){
     //Mobile Link Here
    }
}

5.2. 주소창 없애기

window.addEventListener('load', function() {
	setTimeout(scrollTo, 0, 0, 1);
}, false);