모바일에서 사용하는 -webkit-

1. - webkit-tap-highlight-color

탭, 링크, 포커스가 맞춰졌을때 나타나는 색상을 결정한다. 

아이폰에선 사각형 박스형태로 표시되고, 안드로이드에선 주황색 테두리가 표시된다.

이 포커스를 안보이게 하기 위해

body{-webkit-tap-highlight-color:rgba(0,0,0 0);}

/* 아이폰 에서는 */

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

을 적용하면 조금더 앱스러운 웹페이지를 만들 수 있다.

2. -webkit-text-size-adjust

페이지가 렌덩릴 될때 모바일 브라우져는 텍스트 block의 width에 맞춰 텍스트의 크기를 자동으로 조절한다.

이때 -webkit-text-size-adjust 를 이용해 텍스트의 크기를 조절할 수 있다.

-webkit-text-size-adjust 는 3가지 속성을 가지고 있다.

A. auto

body{-webkit-text-size-adjust:auto}

아무것도 지정하지 않았을 때와 같다 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절한다.

B. none

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

폰트의 자동크기 변환을 막는다 모바일 웹에서는 폰트크기도 레이아웃 구성에 간접영향을 주는 요소가 될수있으므로 일반적으로 none으로 설정한다.

C.n%

body{-webkit-text-size-adjust:120%}

폰트 크기를 지정된 사이즈로 변경한다. 

-webkit-text-size-adjust 속성 사용시 주의 사항

viewport 설정의 "maximum-scale"에 대한 설정이 있어야하며 설정값이 1.0 이하여야만 적용된다.

3. 아이폰/아이패드의 input style

아이폰/아이패드의 기본 웹브라우저는 input이 기본으로 둥근모서리와 쉐도우를 가지고 있다.

둥근모서리와 쉐도우를 안보이게 할려면

input{-webkit-border-radius:0;-webkit-appearance:none;}