그러냐

[Android] WebView zoom in/out을 위한 viewport meta tag 변경 본문

android

[Android] WebView zoom in/out을 위한 viewport meta tag 변경

관절분리 2020. 10. 22. 13:14
반응형

출처 : yenne.tistory.com/4

 

[Android] WebView zoom in/out을 위한 viewport meta tag 변경

기억을더듬어_내가_기억하려고_쓰는글_ Android WebView에서 소스를 받아왔는데, 두 손가락으로 zoom-in/out이 안되게 막혀있는 경우가 있다. 웹뷰에 로드된 html 소스를 까보면 안에 요런 식으로 설정이

yenne.tistory.com

 

기억을더듬어_내가_기억하려고_쓰는글_

 

 

Android WebView에서 소스를 받아왔는데, 두 손가락으로 zoom-in/out이 안되게 막혀있는 경우가 있다.

웹뷰에 로드된 html 소스를 까보면 <head>안에 요런 식으로 설정이 되어 있음. 

user-scalable=no 이놈이 문제인데,

<meta name="viewport" content="width=device-width, user-scalable=no">

하지만 user-scalable=yes로 갈아치운다고 100% 해결이 되지 않았기에, 이 포스팅을 작성하게 됨.... 

 

 

 

일단 Android Native단에서는 해줄 수 있는 방법들이 여러가지가 있는데

 

1. 아래 설정들을 webView 객체에 추가하면 보통 해결.

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(false);

 

2. 그래도 안되면 webview 로딩 완료 시점에 자바스크립트 inject로 meta tag를 강제로 갈아치우면 해결.

StringBuilder script = new StringBuilder();

script.append("javascript:(function(){");
script.append("넣을 javascript 내용");
script.append("})();");
webView.loadUrl(script.toString());

 

 

javascript 변경하는 내용은 아래와 같이 두가지가 있는데

2-1. viewport meta tag를 remove해서 완전 삭제 후 새로 생성하는 방법

2-2. viewport meta tag의 attr을 변경하는 방법


2-1 은 타이밍의 문제가 있다고 해서 비추천.

2-2 방법을 써 보았더니, 보통 된다...... 보통 되는데,

내 앱은 10번에 한 번 꼴로 앱 처음 실행 시 첫 페이지 줌 인/아웃이 안됨!!!

Chrome Dev Tool을 켜서 보면 viewport meta tag는 yes로 잘 바뀌어 있다.

근데 왜? 항상도 아니고 가끔. 왜? ㅠㅠ 아마 이것도 뭔가 타이밍의 문제이지 않았을까 싶다.

 

이럴 땐. meta tag를 연속으로 두번 갈아치우면 해결...!!!

그러니까 2번의 javascript 내용을 이렇게 해주면 된다.

document.querySelector(\"meta[name=viewport]\").setAttribute('content', 'width=device-width, initial-scale=0, maximun-scale=2.0, user-scalable=yes');
document.querySelector(\"meta[name=viewport]\").setAttribute('content', 'width=device-width, initial-scale=1.0, maximun-scale=2.0, user-scalable=yes');

 

처음 부를땐 initial-scale=0을 이용해

zoom-in되어 있는 페이지에서 다른 페이지로 이동할 때 zoom-out되는 효과도 덤으로 얻음.

 

 

 

잘 해결되시길 바라요.

 

 

----------------------------------------------------------------------------------------------------------------------------------

 

나는 위 블로그를 참조하여 일단 이렇게 셋팅을 시키고,

 

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(false);

 

실제 html 소스에서

 

<body onload="vport()"> 

 

그리고

 

function vport(){
   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0, maximun-scale=2.0, user-scalable=yes');
   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=1.0, maximun-scale=2.0, user-scalable=yes');
}

 

이렇게 함수를 넣어서 해결하였다.

반응형
저작자표시

'android' 카테고리의 다른 글

안드로이드 블루투스 검색 안될 때 Permission denial: Location is off  (0) 2021.02.08
안드로이드 하단 바 투명하게 나올때  (0) 2021.01.20
intent 파일 띄우기(pdf, ppt, doc, hwp 등) ActivityNotFoundException  (0) 2020.10.21
android soundpool 일부 재생 안되는 경우  (0) 2020.09.29
안드로이드 FCM 화면 깨우기  (0) 2020.09.26
'android' Related Articles more