모바일 웹 페이지에서 확대 / 축소를 어떻게 비활성화 할 수 있습니까? 있습니다. 그러나 (적어도 안드로이드

기본적으로 몇 가지 텍스트 입력이있는 큰 형태의 모바일 웹 페이지를 만들고 있습니다.

그러나 (적어도 안드로이드 폰에서는) 일부 입력을 클릭 할 때마다 전체 페이지가 확대되어 나머지 페이지가 흐려집니다. moble 웹 페이지에서 이러한 종류의 확대 / 축소를 비활성화하는 HTML 또는 CSS 명령이 있습니까?

답변

이것은 당신이 필요로하는 모든 것이어야합니다 

<meta
     name='viewport'
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>

답변

파티에 늦게 도착한 사람들에게는 kgutteridge의 답변이 효과가 없으며 Benny Neugebauer의 답변에는 target-densitydpi ( 더 이상 사용되지 않는 기능 )가 포함되어 있습니다.

그러나 이것은 나를 위해 작동합니다 : 

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

답변

여기에는 여러 가지 접근 방식이 있으며 위치는 일반적으로 접근성 목적으로 확대 / 축소 할 때 사용자를 제한해서는 안되지만 위치가 필요한 경우가 있습니다.

장치의 너비로 페이지를 렌더링하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

스케일링 방지 및 사용자가 확대 / 축소 할 수 없음 :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

모든 확대 / 축소, 모든 배율 제거

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

답변

당신이 사용할 수있는:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

그러나 Android 4.4 에서는 target-densitydpi 속성 이 더 이상 지원되지 않습니다 . 따라서 Android 4.4 이상에서는 다음이 모범 사례로 제안됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

답변

초기 문제에 대한 해결책은 아직 없으므로 순수 CSS는 2 센트입니다.

모바일 브라우저 (대부분의 경우)는 입력시 글꼴 크기가 16 픽셀이어야합니다. 그래서

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}
스 니펫 확장

문제를 해결합니다. 따라서 사이트의 확대 / 축소 및 느슨한 접근성 기능을 비활성화 할 필요가 없습니다.

휴대폰에서 기본 글꼴 크기가 16 픽셀이 아니거나 16 픽셀이 아닌 경우 미디어 쿼리를 사용할 수 있습니다.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
스 니펫 확장

답변

이 메타 태그와 스타일을 추가하십시오 

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


<style>
body{
        touch-action: manipulation;
    }
</style>

답변

index.html에 메타 태그를 추가하는 것만으로도 페이지가 확대되지 않습니다. 아래 스타일을 추가하면 마술이됩니다.

:root {
  touch-action: pan-x pan-y;
  height: 100%
}

편집 : 데모 : https://no-mobile-zoom.stackblitz.io