가장 일반적인 HTML 뷰포트 메타 설정을 사용하는 경우 입력 요소를 클릭하면 iOS 장치에서 자동 확대/축소가 자동으로 트리거됩니다. 적어도 스마트폰에서는. Safari와 Chrome 브라우저를 사용하여 iPhone 4, 5, 6에서 이것을 테스트했습니다. 내 연구에 따르면 모든 iOS 기기에서 동일합니다.
이 HTML 코드는 자동 확대/축소 효과를 발생시키는 것입니다:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />그러나 이 자동 줌 효과가 항상 바람직한 것은 아닙니다. 때로는 웹 앱의 유용성을 손상시킬 수 있습니다. 전적으로 컨텍스트에 따라 다릅니다.
Safari와 Chrome 모두에서 이 효과를 비활성화하려면 대신 다음을 사용할 수 있습니다.
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
유일한 새 코드는 maximum-scale=1 값을 추가했다는 것입니다. 메타 content로 속성.
중요
이것은 수동 옵션을 비활성화하지 않습니다. Safari에서 확대 및 축소. 자동 줌 기능만 비활성화합니다.
그러나 Chrome의 모바일 브라우저(iOS 기기)에서는 그렇습니다. 수동 줌 옵션을 비활성화하십시오. 사용 사례에 따라 문제가 될 수 있습니다.
Chrome에서 수동 확대/축소를 유지할 수 있는 순수한 HTML 솔루션을 아직 찾지 못했습니다. 그렇게 하면 이 기사를 업데이트하겠습니다.
훨씬 간단한 솔루션
입력 요소에 기본 11px가 아닌 16px의 최소 글꼴 크기를 지정하면 Safari와 Chrome 모두에서 자동 확대/축소 효과가 제거됩니다. 적어도 내 테스트에서는 그랬습니다.
이 방법을 사용하면 콘텐츠 속성에 maximum-scale-1 값을 추가하는 것을 방지할 수 있으므로 Chrome에서 수동 확대/축소를 제한하는 것을 방지할 수 있습니다.
잠깐, 왜 먼저 이 솔루션을 제안하지 않았나요?
글쎄, 당신은 모바일의 모든 입력 필드에 16px 글꼴 크기를 사용하고 싶지 않을 수 있습니다. 이렇게 하면 입력 필드에 맞게 모바일 UI의 타이포그래피를 조정해야 합니다.
그리고 거의 모든 것이 그렇듯이 이 문제는 JavaScript를 사용하여 프로그래밍 방식으로 해결할 수 있지만 이는 이 문서의 범위를 벗어납니다.
또한 사용자가 확대/축소하지 못하도록 제한하는 것은 일반적으로 권장되지 않습니다. W3Schools에서 더 많은 정보를 얻으십시오. 그러나 다시 말하지만 상황에 따라 다릅니다.
한 번에 모든 장치에서 이 문제를 해결할 수 있는 간단한 설정이 있으면 좋을 것입니다. 이 주제에 대한 통찰력이 있는 경우 아래 의견 섹션에 자유롭게 알려주십시오 :-)