모바일 웹 페이지에서 확대/축소를 "비활성화"하려면 어떻게 해야 합니까?
저는 기본적으로 여러 개의 텍스트 입력이 있는 큰 형태의 모바일 웹 페이지를 만들고 있습니다.
하지만 (적어도 안드로이드 휴대폰에서는) 어떤 입력을 클릭할 때마다 페이지 전체가 확대되어 나머지 페이지가 가려집니다.이동 웹 페이지에서 이런 종류의 줌을 비활성화할 수 있는 HTML이나 CSS 명령이 있습니까?
필요한 것은 이것뿐입니다.
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
파티에 늦으신 분들에게, 저는 커터리지의 대답이 통하지 않고 베니 노이게바우어의 대답은 목표 밀도 dpi(가치가 떨어지는 기능)를 포함합니다.
하지만 이 방법은 저에게 효과가 있습니다.
<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" />
index.html에 메타 태그만 추가해도 페이지가 확대되지 않는 것 같습니다.아래 스타일을 추가하면 마법이 됩니다.
:root {
touch-action: pan-x pan-y;
height: 100%
}
편집: 데모: https://no-mobile-zoom.stackblitz.io
모바일 브라우저(대부분)는 입력의 글꼴 크기가 16px가 되어야 합니다.
그리고 아직 초기 문제에 대한 해결책이 없기 때문에, 여기에 순수한 CSS 해결책이 있습니다.
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
문제를 해결합니다.따라서 사이트의 확대/축소 기능과 느슨한 접근성 기능을 비활성화할 필요가 없습니다.
모바일에서 기본 글꼴 크기가 16px 또는 16px가 아닌 경우 미디어 쿼리를 사용할 수 있습니다.
@media screen and (max-width: 767px) {
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
}
다음을 사용할 수 있습니다.
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
...
</head>
그러나 Android 4.4에서는 속성 target-density dpi가 더 이상 지원되지 않습니다.따라서 Android 4.4 이상에서는 다음을 모범 사례로 제시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
이 메타 태그와 스타일을 추가해 보십시오.
<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에서는 더 이상 줌을 사용하지 않도록 설정할 수 없지만 홈 화면 바로가기에서 사이트를 열 때는 줌을 사용할 수 없습니다.
다음 메타 태그를 추가하여 앱을 "Web App cable"로 선언합니다.
<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">
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
핀치, 탭, 포커스 줌을 비활성화하려면 스크립트를 추가하십시오.
'머리'에 다음 '메타' 요소를 추가하기만 하면 작업을 수행할 수 있습니다.
<meta name="viewport" content="user-scalable=no">
'width', 'initial-scale', 'maximum-width', 'maximum-scale'과 같은 모든 특성을 추가하면 작동하지 않을 수 있습니다.따라서 위의 요소를 추가하기만 하면 됩니다.
<header>
<meta name="viewport" content="user-scalable=no">
</header>
한 "user-scalable=no"충분하며 다른 너비 및 척도 매개변수를 제외하는 것이 귀하의 경우에 적합할 것입니다.제 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .iOS 16에서 테스트를 받았습니다.
이 게시물과 다른 몇 가지를 사용하여 다음 코드를 사용하여 Android 및 iPhone/iPad/iPod와 호환되도록 이 문제를 해결할 수 있었습니다.이것은 PHP를 위한 것으로 문자열 검색과 함께 다른 언어에도 동일한 개념을 사용할 수 있습니다.
<?php //Device specific headers
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
if($iPhone || $iPod || $iPad){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}
?>
다른 사람에게 도움이 될 수 있습니다. iOS에서는 스왑을 통해 문제가 해결되었습니다.<button>의 s<div> 언급된. s, 된 에 과 과 된 에 .
한 를 을 .meta는 (Chrome 및 14, 생각합니다 -tag는 (Chrome win10 및 safari IOS 14.3 버전) 에게 합니다 이 에 한 도 되어야 에서 합니다 이 도 되어야 에 한
내 해결책은 기본 줌에 의해 손상된 요소에 대해서만 줌을 비활성화하는 것입니다.
이벤트 청취자를 줌 제스쳐에 등록하고 사용했습니다.event.preventDefault()브라우저의 기본 확대/축소를 억제합니다.
이 작업은 여러 이벤트(터치 제스처, 마우스 휠 및 키)로 수행해야 합니다.다음 토막글은 터치패드에서 마우스 휠과 핀치 제스처의 예입니다.
noteSheetCanvas.addEventListener("wheel", e => {
// suppress browsers default zoom-behavior:
e.preventDefault();
// execution of my own custom zooming-behavior:
if (e.deltaY > 0) {
this._zoom(1);
} else {
this._zoom(-1);
}
});
터치 제스처를 감지하는 방법은 다음과 같습니다. https://stackoverflow.com/a/11183333/1134856
이 기능을 사용하여 애플리케이션의 대부분 부분에 대해 표준 줌 동작을 유지하고 캔버스 요소에 사용자 지정 줌 동작을 정의했습니다.
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
언급URL : https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page
'source' 카테고리의 다른 글
| 온라인 regex 테스터에서 작동하는 MariaDB regex가 SELECT WHERE REgEXP에서 작동하지 않음 (0) | 2023.09.06 |
|---|---|
| MySQL 계산 백분율 (0) | 2023.09.06 |
| 쿼리 실행 방법선택기All and getElementsBy* 메서드가 반환됩니까? (0) | 2023.09.06 |
| 수행 표시줄에 뒤로 단추 표시 (0) | 2023.09.06 |
| PHP에서 객체 배열을 복제하는 방법은? (0) | 2023.09.06 |