모바일 웹 페이지에서 확대 / 축소를 어떻게 비활성화 할 수 있습니까?

316

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

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

html css mobile

— 마틴 픽스 맨
소스

3

Greg가 위에서 말했듯이 확대 / 축소를 비활성화하는 모바일 웹 사이트에 들어가면 내가 가장 먼저하는 일은 뒤로 버튼을 누르는 것입니다 (실제로 볼 것이 아니라면) 나는 내가 유일한 사람이 아니라고 확신합니다. . 또한 내 경험에 비추어 볼 때 확대 / 축소가 비활성화 된 대부분의 웹 사이트는 작은 글꼴을 사용하므로 텍스트를 읽기가 매우 불편하고 불편합니다.

— tomasz86

8

대부분의 사이트에서 사용 중지하면 안된다는 데 동의하지만 기본 확대 / 축소를 사용하지 않으려는 사용 사례가 있습니다 (예 : 확대 / 축소를 재정 의하여 다른 작업을 수행하려는 모바일 웹 게임).

— Luke

11

하지 말아야 할 것 — 사용자가 확대 / 축소하려는 경우 확대 / 축소하도록합니다. 게다가 : Chrome에는 요청을 무시할 수있는 옵션이 있습니다.

— Martin

2

Android Firefox 사용자의 경우 Always Zoom for Firefox 추가 기능이 있습니다. 추천.

— Colin D Bennett

2

에서 아이폰 OS (10) , user-scalable=no무시됩니다. 참조 이

— 랩터

443

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

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

— kgutteridge
소스

23

이렇게하면 사용자가 일반적으로 확대 / 축소 할 수있는 기능과 페이지가 뷰포트에 맞는 방식을 자동으로 조정할 수있는 브라우저 기능도 비활성화됩니다. Martin이 찾는 모든 것은 '입력시 클릭 확대'를 비활성화하는 방법 행동.

— matt lohkamp

3

현재 Posterous의 누군가가 12px의 글꼴을 사용하는 동안 읽을 수 없으므로 그 방법을 찾을 수 없습니다.

— Emil Ivanov

41

나 자신을 포함한 모든 시각 장애인은 무엇보다도 이것을 싫어합니다. 이 작업을 수행하는 페이지를 화면에서 가져 와서 사진 뷰어에서 확대해야합니다.

— 잭 Marchetti

6

두 번째 메타 태그는 무엇을합니까? 아닌가요 width=device-width최초의 메타 태그에 이미?

— Luke

1

이것은 iOS 7에서 작동하지 않는 것 같습니다. lukad03 답변보기

— davivid

159

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

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

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

— 루크 켈러
소스

7

이것이 정답입니다. 다른 답변은 더 이상 작동하지 않습니다 (적어도 iOS 7의 경우).

— KyleFarris

7

누구나 iOS 10.x에서 이것을 시도했지만 작동하지 않는다고 생각합니까?

— JMac

나를 위해 작동하지 않습니다. 그것은 스크롤 바와 나쁜 줌으로 모든 화면의 크기를 조정했습니다.

— Cocorico

1

Apple의 SFB 문제로 인해 Safari / iOS 11에서 여전히 작동하지 않습니다.

— 15ee8f99-57ff-4f92-890c-b56153

52

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

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

<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" />

— SW4
소스

"일반적으로 사용자는 제한되어서는 안됩니다". 그러나 모바일 용 웹 앱을 개발할 때 종종 "입력에 집중"을 처리해야합니다. 이 경우 확대를 비활성화하는 것이 도움이됩니다.

— Le 'nton

@ Le'nton 전체 페이지에서 확대 / 축소를 비활성화하면 입력 초점 확대를 처리하는 좋은 방법이 아닙니다. iOS에서는 최소한 입력의 글꼴 크기를 늘려 입력 초점 줌을 비활성화 할 수 있습니다.

— pfg

39

당신이 사용할 수있는:

<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" />

— 베니 뉴게 바우어
소스

35

초기 문제에 대한 해결책은 아직 없으므로 순수 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;
  }
}

스 니펫 확장

— 아자 마트 라술 로프
소스

2

이 솔루션에 투표가 적은 이유는 무엇입니까? 양식 클릭 확대를 피하는 가장 좋은 방법입니다.

— KlausCPH

1

예; 이것은 내 문제도 해결했습니다! 확대 / 축소를 완전히 사용 중지하고 싶지 않았으며 이것이 바로 필요한 것입니다.

— brendan

1

font-size: 1rem전체 페이지에 대해 설정할 수도 있으므로 "확대에 초점"문제를 피하면서 글꼴의 크기를 조절할 수 있습니다 .

— itachi

12

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

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


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

— 사라 스 악
소스

1

안 touch-action로 설정 none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

나를 touch-action: manipulation;위해 @ rahulroy9202 는 잘 작동했습니다. touch-action: none;아무것도하지 않았다

— Umair

7

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

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

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

— API
소스

2

모바일 사파리 ios13 atm

— Magico

모바일에서 예상대로 작동합니다. 감사합니다! 여기를 확인하십시오 proyecto26.com/animatable-component

— jdnichollsc

6

웹 응용 프로그램에 대한 가능한 솔루션 : iOS Safari에서는 더 이상 확대 / 축소를 비활성화 할 수 없지만 홈 화면 바로 가기에서 사이트를 열면 확대 / 축소 가 비활성화됩니다.

다음 메타 태그를 추가하여 앱을 "웹 앱 가능"으로 선언하십시오.

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

그러나 공유 옵션이 비활성화되어있을 때 앞으로 / 뒤로 단추와 URL 표시 줄이 있으므로 앱이 자체 유지되는 경우 에만 이 기능을 사용하십시오. (그러나 여전히 왼쪽과 오른쪽으로 스 와이프 할 수 있습니다) 그러나이 접근법은 ux와 같은 앱을 가능하게합니다. 전체 화면 브라우저는 사이트가 홈 화면에서로드 될 때만 시작됩니다. ~~루트 폴더에 apple-touch-icon-180x180.png를 포함시킨 후에 만 작동합니다.~~

보너스로 다음과 같은 변형도 포함하고 싶을 것입니다.

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— 덴커
소스

1

다음 '메타'요소를 '헤드'에 추가하면 작업을 수행 할 수 있습니다.

<meta name="viewport" content="user-scalable=no">

'width', 'initial-scale', 'maximum-width', 'maximum-scale'과 같은 모든 속성을 추가하면 작동하지 않을 수 있습니다. 따라서 위의 요소를 추가하십시오.

— 카스미구나 세 카라
소스

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

핀치 비활성화, 탭, 초점 확대를 위해 스크립트를 추가하십시오

— 프렘
소스