[CSS] WebView 작업

pinch to zoom & zoom-in action 설정

<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

HTML head 안에 위 속성을 추가해서 줌을 이용한 축소, 확대 기능을 막아줍니다.

• user-scalable=0 : 확대 및 축소 작업 허용 여부를 설정합니다. 0 이 아닌 no 로 설정해도 동일한 효과를 불러옵니다.
• maximum-scale=1.0 : 페이지에서 허용되는 확대 정도를 1배로 설정합니다.
• minimum-scale=1.0 : 페이지에서 허용되는 축소 정도를 1배로 설정합니다.

터치 관련 설정

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 버튼 클릭시 생기는 highlight 를 제거합니다. */
    -webkit-touch-callout: none; /* 길게 터치할 때 표시되는 기본 설명선의 표시를 제어합니다. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* 텍스트를 선택하지 못하도록 막습니다. */
}

노치 영역 대응

header {
    padding-top: env(safe-area-inset-bottom);
}

작성 중..