How to disable zoom in mobile web and webview(Disable zoom in IOS and Andorid)

Hello

Using zoom in mobile application is important function for user

It allows users to zoom in on small text to see it in detail, and zoom in on image

하지만 줌 속성이 오히려 화면의 레이아웃을 방해할 수도 있습니다.

However, the zoom function may interfere with the layout of the screen

예를 들어 html의 input 속성처럼 텍스트를 입력받는 태그에 포커스를 주면 자동으로 확대 되는 경우가 있습니다.

For example, when an input tag in html gets focus, the screen is automatically enlarged

like below,

At this time, the screen does not zoom out automatically even if you focus on other component or area

so we have the hassle of having to zoom out ourselves

To get rid of this inconvenience , we can disable zooming in and out

currently, many application also disable zooming in and out

If you completely want to disable zoom in your application, you need to disable three cases

the first case, when you use your finger to zoom on the screen(pinch zoom)

the second, when input tag gets a focus

the final, when using double tap

let's disable each case

- How to disable pinch zoom in Android

	mWebSettings.setSupportZoom(false); // 화면 줌 허용 여부
        mWebSettings.setBuiltInZoomControls(false); // 화면 확대 축소 허용 여부
        mWebSettings.setDisplayZoomControls(false);

Set the webView object as above

- How to disable pinch zoom in IOS

import UIKit
import WebKit

class ViewCotroller: UIViewController, WKUIDelegate, WKNavigationDelegate, WkScriptMessageHandler, UIScrollViewDelegate

first, inherit the UIScrollViewDelegate class

and set the webView object as below

webview.scrollView.delegate = self

finally, add the code below to disable pinch zoom

		func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
			scrollView.pinchGestureRecognizer?.isEnabled = false
		}

The way of disabling pinch zoom is different between Android and IOS

-How to disable input focus zoom and disable double tap zoom

pinch 줌 비활성화는 ios와 안드로이드에서 각각의 어플리케이션 프로젝트에서 수정해주었지만

The way of disabling pinch zoom is different between Android and IOS

but, the way of disabling input focus and double tap are same

because in this case, we are modifying the html file

Add meta tag information below between <head> and </head> in your html file

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

In my case, the layout was brokend by adding 'width=device-width와 initial-scale=1.0'

because i already have developed without 'width=device-width와 initial-scale=1.0' code

'width=device-width와 initial-scale=1.0' is setting related to aspect ratio of the screen

so, i added below code

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

if you don't want to break your layout, it may also fine adding only above code

이렇게 해서 모바일 웹뷰에서 일어나는 모든 화면 확대 축소 기능에 대해 비활성화를 다뤄 봤습니다.

now, we have covered disabling zoom function on all screen that occurs in mobile web and webview

specific program

Search This Blog