안녕하세요.
화면 확대 축소 기능은 어플리케이션 사용자들에게 중요한 기능입니다.
작은 글씨를 확대해서 자세히 볼 수 있고, 이미지를 확대하여 볼 수도 있습니다.
하지만 줌 속성이 오히려 화면의 레이아웃을 방해하는 경우도 있습니다.
예를 들어 html의 input 속성처럼 텍스트를 입력받는 태그에 포커스를 주면 자동으로 확대 되는 경우가 있습니다.
포커스를 받을때 화면이 확대되고 포커스를 다시 다른곳에 준다고해서 화면이 원래 대로 돌아오지 않기 때문에
사용자가 직접 다시 줌 아웃을 해서 정상 화면으로 돌아와야합니다.
화면을 확대할 필요가 없는 경우에는 상당히 불편할 수 있습니다.
이러한 불편함을 없애기 위해 화면 확대 및 축소 기능을 비활성화 할 수 도 있으며,
현재는 많은 어플리케이션이 확대 축소를 비활성화 하기도 합니다.
만일 나의 어플리케이션에서 화면 확대 및 축소 줌 기능을 완전히 사용하고 싶지 않다고 생각이 된다면
3가지 상황에 대해 비활성화를 해야 합니다.
화면 확대가 일어나는 경우
사용자가 직접 두 손가락으로 화면 확대 축소를 사용하는 경우 (pinch)
- input 태그에 focus가 이동했을때
- double tap 빠르게 두번 터치했을때
사용자가 직접 두손가락을 이용하여 화면 확대 및 축소를 하는 경우를 pinch zoom 이라고 하는데,
이때에는 웹뷰 설정을 통해 zoom속성을 비활성화 해야합니다.
pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
- 안드로이드의 pinch zoom 비활성화
mWebSettings.setSupportZoom(false); // 화면 줌 허용 여부
mWebSettings.setBuiltInZoomControls(false); // 화면 확대 축소 허용 여부
mWebSettings.setDisplayZoomControls(false);
웹뷰 객체에 위와 같이 설정해줍니다.
- ios의 pinch zoom 비활성화
import UIKit
import WebKit
class ViewCotroller: UIViewController, WKUIDelegate, WKNavigationDelegate, WkScriptMessageHandler, UIScrollViewDelegate
위처럼 UIScrollViewDelegate 클래스를 상속 받습니다.
웹뷰 설정 객체에 다음과 같은 설정을 추가 해줍니다.
webview.scrollView.delegate = self
그리고 아래 메서드를 추가하면 핀치 줌이 비활성화 됩니다.
func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
scrollView.pinchGestureRecognizer?.isEnabled = false
}
핀치 줌 속성을 비활성화하기 위해서는 위와 같이 각각의 os의 개발 툴에서 설정을 합니다.
-input focus와 double tap 상황에서 줌 설정 비활성화
pinch 줌 비활성화는 ios와 안드로이드에서 각각의 어플리케이션 프로젝트에서 수정해주었지만
input focusd와 double tap 상황에서는 html 파일에서 수정을 해야합니다.
각각의 html 페이지에서 <head></head>태그 사이에 아래의 메타태그 정보를 입력해줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1.0, user-scalable=no" />
width=device-width와 initial-scale=1.0은 화면 너비 초기설정 값인데 이부분 없이 개발을 이미 진행하신 경우에는
오히려 저 코드가 추가되서 화면 비율이 깨질수 있습니다.
저의 경우에도 그러했기 때문에
저는 그냥 화면 확대 축소만 비활성화 하는 밑의 태그를 집어넣어줬습니다.
<meta name="viewport" content="user-scalable=no" />
이렇게 해서 모바일 웹뷰에서 일어나는 모든 화면 확대 축소 기능에 대해 비활성화를 다뤄 봤습니다.
각각의 경우에 따라 본인이 원하는 페이지에서 활성화 하고 비활성화해서 사용한다면
더욱 좋은 어플리케이션이 될 수 있을 것입니다.
'모바일' 카테고리의 다른 글
| [iOS] 푸시알림 APN 링크 받아서 링크주소로 웹뷰 이동하기 (13) | 2021.03.03 |
|---|---|
| [IOS Swift] WKWebView에서 모바일 사파리 새창으로 이동 링크 막기 (0) | 2021.02.26 |
| [ios] 자바 스프링 서버에서 iOS앱에 푸시 알림 보내기(APNs 개발용, 배포용) (2) | 2021.02.12 |
| [iOS] 푸시알림 클라우드 메세지 보내기[2] (APNS, 파이어베이스) (0) | 2021.02.11 |
| [iOS] 푸시알림 클라우드 메세지 보내기[1] (APNS, 파이어베이스) (0) | 2021.02.11 |
