모바일 웹 페이지에서 확대 / 축소를 어떻게 비활성화 할 수 있습니까?
기본적으로 몇 가지 텍스트 입력이있는 큰 형태의 모바일 웹 페이지를 만들고 있습니다.
그러나 (적어도 내 안드로이드 휴대 전화에서는) 일부 입력을 클릭 할 때마다 전체 페이지가 확대되어 나머지 페이지가 흐려집니다. 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>
웹 응용 프로그램에 대한 가능한 솔루션 : 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'/>
다음 '메타'요소를 '헤드'에 추가하면 작업을 수행 할 수 있습니다.
<meta name="viewport" content="user-scalable=no">
'width', 'initial-scale', 'maximum-width', 'maximum-scale'과 같은 모든 속성을 추가하면 작동하지 않을 수 있습니다. 따라서 위의 요소를 추가하십시오.
참고 URL : https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page
'development' 카테고리의 다른 글
| React Router v4에서 히스토리로 푸시하는 방법? (0) | 2020.03.15 |
|---|---|
| Android Marshmallow에서 특정 앱의 권한 화면을 프로그래밍 방식으로 여는 방법은 무엇입니까? (0) | 2020.03.15 |
| 비밀번호 프롬프트없이 우분투에 MySQL 설치 (0) | 2020.03.15 |
| 포커스를 받으면 텍스트 상자의 모든 내용을 선택하십시오 (Vanilla JS 또는 jQuery) (0) | 2020.03.15 |
| Xcode에서 NSZombie를 활성화하는 방법은 무엇입니까? (0) | 2020.03.15 |